Built with vanilla JavaScript, this project was my first taste of OOP, getting some reps in for prototypal-inheritance, JS classes, constructor functions, DOM manipulation, and local storage.
One of the simplest projects I've done, but easily one of the most memorable && fun.
- Add Books: Input book details including title, author, page count, and reading status
- Responsive Design: Clean, card-based layout that works on all screen sizes
- Interactive UI: Toggle book status and remove books with a single click
- Persistent Storage: Books are saved in the browser's local storage
- Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
- Styling: CSS Grid and Flexbox for responsive layouts
- Design: Clean, intuitive user interface with Google Fonts integration
- Object-oriented programming with JavaScript classes and prototypes
- DOM manipulation and event handling
- Form validation and data persistence
- Responsive web design principles
- Code organization and project structure
This project was completed as part of The Odin Project's JavaScript curriculum, focusing on:
- Working with constructor functions and object prototypes
- Implementing CRUD (Create, Read, Update, Delete) operations
- Understanding the separation of data and display logic
- Practicing clean, maintainable code structure
This was also the first project in Odin's Javascript Course, which meant it was one of the simplest projects I've ever attempted - but at the same time, this was one of the projects I had the most fun with. Even looking back through the code now, especially the v1 code, a lot of it looks super messy and not DRY, but I can still remember every line.