fullstackjs-library

A small Library application built with vanilla JavaScript as part of
The Odin Project – JavaScript Course (Full Stack JavaScript Path).

This project focuses on managing application state, handling user input, and dynamically updating the DOM without using external frameworks.

---

🚀 Live Demo

👉 https://top-submissions.github.io/fullstackjs-library/

---

🧠 About the Project

This project allows users to manage a personal library by adding, displaying, updating, and removing books from a collection.

It was built to practice:

• Object-based data modeling
• Event-driven programming
• DOM manipulation
• Clean project structure
• Avoiding unnecessary global variables

---

✨ Features

• Add new books via a form
• Display books dynamically on the page
• Toggle read / unread status
• Remove books from the library
• Responsive and clean layout
• GitHub Pages deployment

---

🛠 Built With

• HTML5
• CSS3
• JavaScript (ES6)
• DOM Manipulation
• Event Listeners
• GitHub Pages

---

📖 How It Works

• Books are stored as JavaScript objects.

• Each book contains information such as:

  • Title
  • Author
  • Pages
  • Read status

• Event listeners handle user interactions like:

  • Adding a new book
  • Toggling read status
  • Removing a book from the list

• The DOM is re-rendered when the library data changes.

---

📚 What I Learned

• Structuring small JavaScript applications
• Handling forms and user input
• Updating the DOM dynamically
• Writing readable and maintainable JavaScript
• Using GitHub Actions for deployment

---

🔮 Possible Improvements

• Persist data using localStorage
• Edit existing book entries
• Filter and sort books
• Improve accessibility
• Add animations or transitions

---

👤 Author

MatimotTheTimoters GitHub: https://github.com/Chonky_Seal