A simple and interactive People Counter web application built using HTML, CSS, and JavaScript.
This project allows users to count the number of people entering a place and save previous entry counts. It is a beginner-friendly project designed to practice JavaScript variables, functions, DOM manipulation, and event handling.
- ➕ Increment the people count
- 💾 Save previous entry counts
- 🔄 Automatically reset the current count after saving
- 📋 Display previously saved entries
- 🎨 Modern glassmorphism-style UI
- 🖼️ Full-screen background image
- 📱 Responsive design for different screen sizes
- ✨ Button hover and click animations
- HTML5 – Structure of the application
- CSS3 – Styling, responsive design, animations, and glassmorphism effect
- JavaScript – Counter functionality and DOM manipulation
People-Counter/
│
├── index.html
├── style.css
├── script.js
├── train.jpg
└── README.md
This project helped me practice:
- JavaScript variables
- let keyword
- Functions
- Increment operator (++)
- DOM selection using getElementById()
- DOM manipulation using textContent
- onclick event handling
- CSS Flexbox
- CSS Media Queries
- CSS transitions and hover effects
- Responsive web design
- Clone the repository: git clone https://github.com/your-username/people-counter.git
- Open the project folder.
- Make sure train.jpg is present in the project folder.
- Open index.html in your browser.
That's it! 🎉
Some possible improvements for this project are:
- Add a RESET button
- Add a DELETE LAST ENTRY button
- Add a total count of all saved entries
- Store entries using localStorage
- Add date and time to each entry
- Add dark/light mode
- Add sound effects when buttons are clicked
Isheta Dhanavada