Library is an interactive, object-oriented web application built as part of The Odin Project curriculum. It acts as a digital bookshelf allowing users to dynamically track their personal book collection, add new entries using an accessible HTML <dialog> modal with native form validation, and modify reading statuses in real-time.
- Object-Oriented Programming (OOP): Utilizes ES6 classes (
Book) with unique ID assignment viacrypto.randomUUID()and built-in methods for state modification. - Interactive Modal Form: Clean modal overlay utilizing the native HTML
<dialog>element for seamless user input. - Robust Form Validation: Custom constraint validation handling empty fields, length limits, and numeric ranges with dynamic error messaging.
- Dynamic DOM Rendering: Automatically maps library state arrays into responsive CSS grid cards with instant add, remove, and read-status toggling capabilities.
- Markup: Semantic HTML5 structure incorporating
<dialog>,<fieldset>, and accessible error display nodes. - Styling: Modern CSS3 featuring CSS Grid, responsive card layouts, custom shadows, and state transitions.
- Logic: Vanilla JavaScript (ES6) controlling state management, constructor patterns, array filtering, and DOM event listeners.
Clone the repository:
git clone git@github.com:cmatsagka/library.gitOpen the project directory:
cd librarylibrary/
├── index.html # Structural markup including the modal dialog and grid container
├── styles.css # Design system, grid styling, card layouts, and dialog styling
├── script.js # OOP classes, dynamic library array logic, and form validation
└── images.png # Preview screenshot