Skip to content

README.md

Latest commit

 

History

History
48 lines (36 loc) · 2.47 KB

README.md

File metadata and controls

48 lines (36 loc) · 2.47 KB
Raw

Online Library Management System

A premium, modern, and responsive Library Management System built with Vanilla JavaScript. This application allows users to manage a collection of books, track borrowing status, and maintain a history of actions.

🚀 Features

Core Functionality

  • Browse Library: View a grid of books with covers, ratings, and status.
  • Search & Filter: Real-time searching by title/author and filtering by category.
  • Sort: Sort books by Newest, Title (A-Z), or Rating (High-Low).
  • Add Books: Add new books with custom covers and summaries. (Includes validation).
  • Borrow/Return: Simulate borrowing and returning books with status persistence.

Advanced Features

  • Favorites: Mark books as favorites and view them in a dedicated "Favorites" tab.
  • History: Track all borrowing and returning history in the "History" tab.
  • Persistence: All data (Books, Status, Favorites, History) is saved to LocalStorage, ensuring it remains available after page reloads.
  • Book Details: View detailed information including full summaries in a modal.

Technical Highlights

  • Event Delegation: Optimized event handling for performance.
  • Robust Error Handling: Safe storage operations and input validation.
  • Zero Dependencies: Built entirely with HTML5, CSS3, and Modern JavaScript (ES6+ Modules).

🛠️ Setup & Usage

  1. Clone or Download the repository.
  2. Open index.html in any modern web browser.
    • Note: For ES Modules to work strictly without local server warnings, using a simple local server (like Live Server in VS Code) is recommended, though it may work directly in some browsers depending on security headers.

📖 How to Use

  1. Adding a Book: Click the "Add Book" button in the header. Fill in the details. The Cover URL is validated automatically.
  2. Browsing: Use the Sidebar to switch between "Browse", "Favorites", and "History".
  3. Interacting:
    • Click the Heart icon on a book to favorite it.
    • Click the Bookmark/Return icon to toggle status.
    • Click the Eye icon to view full details and summary.
  4. Sorting: Use the dropdown next to the search bar to change the sort order.

💻 Technlogy Stack

  • HTML5: Semantic structure.
  • CSS3: Custom variables, Grid/Flexbox layouts, Glassmorphism effects.
  • JavaScript: ES6 Modules, Classes, LocalStorage API.

Created by [Prateek Mishra]