📖 Overview Vincent Clicker is a simple web-based counter application designed to track the number of students entering a location. The interface allows users to increment a counter, save entry counts, and clear the counter when needed.
The project features a background image of Brooklyn Technical High School and demonstrates fundamental web development concepts such as JavaScript event handling, DOM manipulation, and simple data tracking.
🎮 How to Use
User: Single user interacting with the counter system.
Objective: Track the number of students entering by incrementing the counter and saving previous entry counts.
Usage Overview
When the page loads, the student counter begins at 0.
Three interactive buttons control the application:
Increment Adds +1 to the current student count.
Save Stores the current count and displays it in the previous entries list.
Clear Resets the current counter back to 0.
Example Output
Student Count: 8
Previous Entries 5 - 7 - 8
Each saved value represents a previous count that was recorded before resetting or continuing the counter.
💻 Requirements
To run this project locally you will need:
• Visual Studio Code • Live Server extension • A modern web browser (Chrome, Edge, Firefox, etc.)
⚙️ How to Run
-
Ensure Visual Studio Code is installed.
-
Install the Live Server extension.
-
Clone the repository:
git clone https://github.com/YOUR-USERNAME/vincent_clicker.git
-
Open the project folder in Visual Studio Code.
-
Right-click index.html and select:
Open with Live Server
The application will automatically launch in your browser.
🧩 What I Learned
• Built a basic interactive web application using HTML, CSS, and JavaScript • Implemented button-driven functionality with JavaScript event listeners • Manipulated webpage elements dynamically using the DOM • Designed a simple interface for user interaction and data tracking
🔮 Future Improvements
-
Local Data Storage Save entries using localStorage so the data persists after refreshing the page.
-
Timestamp Tracking Record the time when each entry count is saved.
-
Data Visualization Display entry statistics such as total entries per session.
-
Responsive Design Improve layout and styling for mobile devices.
-
Admin Controls Add a login system for authorized users to manage entry data.
🪪 License
MIT License — free to use and modify for educational purposes.