This repository contains a complete implementation of Homework 9, focused on code modularity, modern build tools, and working with local storage using Vite as a bundler.
Wow — you are already in Module 9! 💪 At this stage of the JavaScript course, the focus shifts toward professional project structure, modular code organization, and real-world tooling.
This homework reinforces your understanding of:
- JSON format and its characteristics
- JSON object methods (
stringify,parse) - Web Storage vs Local Storage
- Node.js installation and NPM usage
- Code modularity concepts
- ECMAScript Modules (ESM) syntax
- Installing, removing, and using packages via NPM
It’s time to put theory into practice by building an image gallery and a feedback form with persistent state.
goit-js-hw-09/ ├─ src/ │ ├─ assets/ │ │ └─ images/ │ ├─ js/ │ ├─ pages/ │ │ ├─ gallery/ │ │ │ ├─ gallery.html │ │ │ ├─ gallery.js │ │ │ └─ gallery.css │ │ └─ form/ │ │ ├─ form.html │ │ ├─ form.js │ │ └─ form.css │ ├─ data.js │ └─ style.css ├─ public/ │ └─ vite.svg ├─ dist/ ├─ index.html ├─ package.json ├─ vite.config.js └─ README.md
The project is built using Vite with ES Modules and follows a clean, scalable folder structure.
Implemented in src/pages/gallery/gallery.html and src/pages/gallery/gallery.js.
The goal of this task is to create an image gallery using the SimpleLightbox library instead of manual event delegation and modal logic.
- Gallery items are generated dynamically from an images data array
- No manual event listeners for opening or closing the modal
- SimpleLightbox handles:
- Image clicks
- Modal opening and closing
- Keyboard navigation
import SimpleLightbox from "simplelightbox"; import "simplelightbox/dist/simple-lightbox.min.css";
<li class="gallery-item">
<a class="gallery-link" href="large-image.jpg">
<img
class="gallery-image"
src="small-image.jpg"
alt="Image description"
/>
</a>
</li>
- Image captions are taken from the
altattribute - Captions appear below the image
- Caption delay is set to 250ms
- Gallery is rendered dynamically from JS data
- Layout matches the provided template
- No custom event listeners are used
- SimpleLightbox is installed via NPM
- Library is initialized after DOM elements are added
- Modal opens with the correct large image
- Image caption appears after 250ms
Implemented in src/pages/form/form.html and src/pages/form/form.js.
This task focuses on working with localStorage to preserve form state between page reloads.
<form class="feedback-form" autocomplete="off">
<label>
Email
<input type="email" name="email" autofocus />
</label>
<label>
Message
<textarea name="message" rows="8"></textarea>
</label>
<button type="submit">Submit</button>
</form>
- Form input events are listened using delegation
- Form state is saved under the key
"feedback-form-state" - Whitespace is trimmed before saving
- Data persists after page reload
- On submit:
- Both fields are validated
- Form data is logged to the console
- localStorage is cleared
- Form fields are reset
- Form contains email, message, and submit button
- Form is styled according to layout
- Input and submit events are handled
- localStorage updates without overwriting other fields
- No
undefinedvalues appear in inputs - Form state restores correctly on reload
- Console logs correct data object on submit
This homework demonstrates a modern JavaScript workflow using:
- ES Modules
- Vite bundler
- NPM package management
- Third-party libraries
- Persistent browser storage
The project follows best practices for scalability, readability, and maintainability.
- GitHub Repository: https://github.com/kutluhangil/goit-js-hw-09
- Live Demo (GitHub Pages): https://kutluhangil.github.io/goit-js-hw-09/