Library

Overview

This project is part of The Odin Project curriculum, focusing on creating a simple library application that allows users to manage a collection of books. Users can add new books, view a list of all books, remove books, and toggle the read status of each book. The app is built using HTML, CSS, and JavaScript. This project prioritizes functionality and interactivity over visual design.

Technologies Used

• HTML5 – Structures the content of the application.
• CSS3 – Handles styling and layout.
• JavaScript – Implements the logic for adding, displaying, removing, and toggling the read status of books.

Features

• Add a New Book: Users can add a new book by filling out a form with details such as the book's title, author, number of pages, and whether it has been read.
• Display Books: The app displays all books in the library in a grid of cards, making it visually appealing and easy to navigate.
• Remove a Book: Each book displayed has a button to remove it from the library.
• Toggle Read Status: Users can toggle the read status of a book (e.g., from "Read" to "Not Read Yet" and vice versa) with a button on each book's display.

Project Structure

The project is organized into the following key components:

• Book Form: A form that allows users to input book details (title, author, pages, and read status).
• Library Display: A grid of cards that displays all books in the library. Each card includes:
  • Book title, author, and page count.
  • A button to toggle the read status.
  • A button to remove the book from the library.

Future Enhancements

• Local Storage: Save the library data to local storage so that it persists after the page is refreshed.
• Search and Filter: Add functionality to search and filter books by title, author, or read status.
• Enhanced Styling – Adding CSS animations and transitions for better UX.
• Edit Book Details: Allow users to edit the details of a book after it has been added.
• Sorting Books: Users can sort books alphabetically, by author, or by page count.
• Clean Code: Refactor the code to follow best practices and improve maintainability.

Screenshots

• Site
  

• Form
  

Live Demo

View on GitHub Pages

Acknowledgments

• The Odin Project – For providing the curriculum and project inspiration.

License

This project is open-source and available under the MIT License.

Contact

For any inquiries or collaborations, feel free to reach out:

• GitHub – linzi-v7
• LinkedIn – Faris Osama

---

📌 Project Status: Completed 🚀 (Future improvements planned)