Electronic Gadgets Rental System

A modern, responsive, single-page website that demonstrates an Electronic Gadgets Rental System. It is designed as a college project and focuses on:

• Clean, card-based UI
• Simple user flows (register, login, browse, rent, return)
• Admin management (add/edit/remove gadgets, monitor rentals)

This project is fully front-end (HTML/CSS/JavaScript) and uses localStorage to simulate a database, so it runs directly in any modern browser.

Features

• Home page
  • Explains the concept of gadget rentals and key benefits
  • Highlights featured gadgets in attractive cards
• User registration & login
  • Create a new account (stored in localStorage)
  • Login/logout with simple form validation
• Browse gadgets
  • Filter by category and availability
  • Each gadget shows image, description, price per day, and stock
• Gadget detail & rental
  • Detailed specs and description
  • Select rental duration and see automatic total price
  • Confirm rental (stock count decreases)
• User dashboard
  • Current rentals with due dates and return button
  • Rental history table
• Admin panel
  • Pre-seeded admin account: admin@gadgets.com / admin123
  • Add / edit / delete gadgets
  • View recent rental records

Project structure

• index.html – Main SPA shell and all sections (home, catalog, dashboard, admin, auth modal)
• styles.css – Modern dark theme with glassmorphism, card layouts, and responsive design
• app.js – All app logic: routing, auth, gadgets, rentals, admin operations
• package.json – Optional helper to run a local web server using Node

How to run

Option 1: Open directly (simplest)

1. Locate the project folder.
2. Double‑click index.html to open it in your browser.

For most college demos, this option is enough.

Option 2: Local web server (recommended)

1. Install Node.js (if not already installed).

2. In a terminal, go to the project folder:

   cd "PBL 2"
   npm install serve --save-dev
   npm run start

3. Open the printed URL (for example http://localhost:3000) in your browser.

Demo accounts

• Admin
  • Email: admin@gadgets.com
  • Password: admin123
• User
  • Register any new user via the Register tab in the auth modal.

Notes & limitations

• Data is stored in localStorage:
  • Users
  • Gadgets
  • Rentals
• This is ideal for a project demonstration, but not for production usage:
  • No real server / database
  • Passwords are stored in plain text (for demo only)

If you later decide to convert this into a full-stack project, you can keep the UI and replace the localStorage logic in app.js with real API calls to your backend.