This project is a dynamic and interactive book library, created as part of a task in the Odin Project course. It allows users to add books to an online library, making it easy to organise and track the books they have read or plan to read. The project focuses on JavaScript concepts such as array manipulation and DOM interaction.
The motivation for this project comes from a desire to improve my practical programming skills while applying key concepts that I am learning from the Odin Project course and Codecademy. This project focuses on core JavaScript techniques, including array manipulation, object constructors, and dynamic DOM updates.
Add Books: Users can add books to the library using a simple form interface. Books are stored and displayed dynamically on the webpage. Remove Books: Provides functionality to remove books from the library with the click of a button. Toggle Read Status: Users can toggle between "read" and "unread" statuses for each book in the library.
- Languages: HTML, CSS and JavaScript
Dynamic DOM Interaction: Managing DOM elements dynamically created with JavaScript, such as the "read" and "delete" buttons, posed significant challenges due to their lack of predefined attributes.
Re-rendering Issues: Ensuring that the "add book" button correctly triggered the display function without duplicating existing entries in the library array.
Problem-Solving: I focused on breaking down challenges systematically by writing down the issues and brainstorming possible solutions. This approach helped me resolve most problems without relying on external resources.
DOM Manipulation: Gained deeper insights into dynamically updating and managing the DOM using JavaScript.
Efficient Research: For more specific problems, such as using indexOf to manage array data, I effectively used online resources such as Stack Overflow and MDN Web Docs.
CSS Improvements: Enhance the visual design of the library to create a more enjoyable user experience.
Code Refinement: As I continue to learn, I will come back to implement more efficienct and cleaner solutions for the Javascript code.
For questions or feedback, feel free to reach out:
Email: John98elliott@gmail.com
GitHub: Jakelliott98
LinkedIn: John Elliott