This project is a dynamic Library web application built as part of The Odin Project JavaScript curriculum.
It focuses on practicing core JavaScript fundamentals, DOM manipulation, object-oriented programming concepts, and working with browser storage.
This library app allows users to add books, mark them as read/unread, and remove them from the collection.
The project emphasizes understanding how to manage application state using JavaScript and update the DOM dynamically.
The main goals were to strengthen understanding of:
- JavaScript constructors and object creation
- Managing application state with arrays
- DOM manipulation and dynamic rendering
- Event delegation
- Working with browser localStorage
- Building interactive UI components
- Structuring JavaScript code for readability
- HTML5
- CSS3 (Grid & Flexbox)
- JavaScript (ES6+)
- LocalStorage API
- Google Fonts (Rubik)
- Git & GitHub
- Creating objects using constructor functions
- Managing collections of objects in arrays
- Rendering UI dynamically from JavaScript data
- Using event delegation for dynamic elements
- Updating the DOM efficiently
- Persisting data with LocalStorage
- Structuring JavaScript logic into clear functions
- Building a modal form interface
In addition to the base exercise, I added:
- Dark-themed UI design
- Modal form for adding books
- Read / unread toggle functionality
- Delete book functionality
- Card-style book layout with hover effects
- Header and footer with visual depth using shadows
- GitHub link with animated icon
- Add full mobile responsiveness
- Improve accessibility and keyboard navigation
- Add edit functionality for books
- Implement smoother animations and transitions
- Refactor code using ES6 classes and modules
The Odin Project is a free open-source curriculum for learning web development:
https://www.theodinproject.com/
Built by Soren Javedan
GitHub: https://github.com/JavedanCode