Building a Simple People Counter App with HTML, CSS, and JavaScript: A Step-by-Step Guide

Published in

Web 3 Digitals

7 min readApr 9, 2024

· Introduction
· Project Overview
· Prerequisites
· Features of the People Counter Application
· Code Structure
∘ Step 1. HTML Structure:
∘ Step 2. CSS Styling:
∘ Step 3. JavaScript Logic:
· Testing and Debugging
· Lessons Learned
· Deployment
· Future Improvements
· Conclusion

Introduction

The People Counter app is a web-based application built using HTML, CSS, and JavaScript and designed to count the number of people entering a specific area, such as a store or an event venue. Following this People Counter application project guide till the end will improve your skills in front-end development.

Project Overview

The People Counter app is designed to offer a simple and effective method to count the number of people entering and exiting a designated area. It aims to replace manual counting methods with a digital solution that is accurate, reliable, and user-friendly.

Prerequisites

To build this People Counter application, you’ll need a basic understanding of HTML, CSS, and JavaScript. You should be familiar with HTML for structuring the application, CSS for styling it, and JavaScript for implementing the logic of the application.

A text editor or IDE (e.g., Visual Studio Code) is required for writing code, and a web browser is needed for testing. Optional prerequisites include a GitHub account for hosting the application.

Features of the People Counter Application

In this project, you will be creating a People Counter application with the following features:

Real-time Counting: The app provides real-time updates of the current count as people enter and exit.
Reset Function: Users can reset the count to zero at any time.
Simple Interface: The app features a clean and intuitive interface, making it easy for users to operate.
Responsive Design: Ensure the application is responsive and works well on different devices.

Code Structure

Create a new folder for your project, name the folder as you wish, and inside it, create three files named index.html, style.css, and script.js. These files will serve as the foundation for your project. Now open the folder in a text editor or IDE (e.g., Visual Studio Code) and follow the steps below:

Step 1. HTML Structure:

Open theindex.html file and paste the following HTML code for the People Counter application:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="./style.css">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Acme&family=Carter+One&family=Cookie&family=Island+Moments&family=PT+Serif+Caption&family=Playfair+Display+SC:wght@400;700;900&family=Red+Hat+Display:wght@700;900&display=swap" rel="stylesheet">
 <title>People Counter Application</title>
</head>
<body>
 <h1 class="main-header">People Counter Application</h1>

 <div class="container">
  <h1>People Entered: </h1>

  <h2 id="count-el">0</h2>

  <button id="increment-btn">Increment</button>

  <button id="decrement-btn">Decrement</button>

  <button id="save-btn">Save</button>

  <button id="reset-btn">Reset</button>

  <p>Saved Counts: <span id="save-el"></span></p>

 </div>

 <script src="script.js"></script>
</body>
</html>

The HTML code above sets up a simple People Counter application. It includes metadata for character encoding, viewport settings, and compatibility. It links to an external CSS file for styling and Google Fonts for custom fonts.

The body contains a header, a container for the counter and buttons, and a section to display saved counts. The JavaScript file script.js is linked at the end for functionality. The application allows users to increment and decrement a counter, save the count, reset the count, and display saved counts.

Step 2. CSS Styling:

Open thestyle.css file and paste the following CSS code to style the People Counter application:

@import url('https://fonts.googleapis.com/css2?family=Acme&family=Carter+One&family=Cookie&family=Island+Moments&family=PT+Serif+Caption&family=Playfair+Display+SC:wght@400;700;900&family=Red+Hat+Display:wght@700;900&display=swap');

/* UNIVERSAL SELECTOR STYLING STARTS HERE */
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

/* BODY STYLING STARTS HERE */
body {
 display: flex;
 align-items: center;
 justify-content: center;
 background-image: url("https://source.unsplash.com/1600x900/?people");
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 font-weight: bold;
 color: white;
 text-align: center;
 position: relative;
 min-height: 100vh;
}

.main-header {
 display: block;
 position: absolute;
 top: 20px;
 font-weight: bold;
 text-transform: uppercase;
 font-size: 2.2em;
 background-color: black;
 padding: 10px;
}

/* DIV CONTAINER STYLING STARTS HERE */
.container {
 background-color: black;
 width: 100%;
 max-width: 500px;
 padding: 2em 4em;
 color: white;
 border-radius: 35px;
 margin: 6em 2em;
}

.container h1 {
 margin-top: 2px;
 margin-bottom: 10px;
 text-transform: uppercase;
 font-weight: bold;
 letter-spacing: 1px;
 font-size: 2.2em;
}

.container h2 {
 font-size: 2.2em;
 margin-top: 0;
 margin-bottom: 20px;
}

.container button {
 border: none;
 padding-top: 10px;
 padding-bottom: 10px;
 background-color: goldenrod;
 color: white;
 text-transform: uppercase;
 width: 250px;
 margin: auto;
 display: flex;
 justify-content: center;
 margin-bottom: 6px;
 margin-top: 6px;
 border-radius: 5px;
 font-weight: bold;
 letter-spacing: 1px;
 font-size: 20px;
}

/* HOVER BUTTON STYLING STARTS HERE */
.container button:hover {
 background-color: rgb(126, 91, 5);
 color: white;
 transition: 0.3s ease-in-out;
}

/* PARAGRAPH STYLING STARTS HERE */
.container p {
 color: white;
 font-size: 1.2em;
 letter-spacing: 1px;
}

/* MEDIA QUERY STYLING STARTS HERE */
@media screen and (max-width: 660px) {
 .main-header {
  font-size: 2em;
 }
}

@media screen and (max-width: 580px) {
 .main-header {
  font-size: 22px;
  padding: 10px;
 }

 .container h1 {
  letter-spacing: 2px;
  font-size: 30px;
 }

 .container h2 {
  font-size: 30px;
 }

 .container button {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: goldenrod;
  width: 200px;
  font-size: 20px;
 }

 .container p {
  font-size: 20px;
 }
}

@media screen and (max-width: 360px) {
 .main-header {
  font-size: 1.5em;
  padding: 10px;
 }

 .container h1 {
  letter-spacing: 1px;
  font-size: 22px;
 }

 .container h2 {
  font-size: 20px;
 }

 .container button {
  width: 120px;
  font-size: 13px;
 }

 .container p {
  font-size: 10px;
 }
}

This CSS code above styles the People Counter application. It includes styling for the body, main header, container, headings, buttons, paragraphs, and a responsive design using media queries.

The code sets the background, font styles, colors, layout, and responsiveness of the elements on the page to create a visually appealing and functional user interface for the People Counter application.

Step 3. JavaScript Logic:

Open thescript.js file and add functionality to the People Counter application using the following JavaScript code:

let countEl = document.querySelector('#count-el');

let incrementEl = document.querySelector('#increment-btn');

let decrementEl = document.querySelector('#decrement-btn');

let saveBtn = document.getElementById("save-btn");

let resetEl = document.querySelector('#reset-btn');

let saveEl = document.getElementById("save-el");

let count = localStorage.getItem('count') ? parseInt(localStorage.getItem('count')) : 0;

countEl.innerText = count;

incrementEl.addEventListener('click', () => {
    count += 1;
    countEl.innerText = count;
});

decrementEl.addEventListener('click', () => {
    count -= 1;
    if (count < 0) count = 0;
    countEl.innerText = count;
});

resetEl.addEventListener('click', () => {
    count = 0;
    countEl.innerText = count;
});

saveBtn.addEventListener('click', () => {
    let countStr = `${count} - `;
    saveEl.textContent += countStr;
    localStorage.setItem('count', count);
    countEl.textContent = 0;
    count = 0;
});

The JavaScript code above defines functionality for the People Counter application. It selects various elements from the HTML document, initializes a count variable, and sets up event listeners for the increment, decrement, reset, and save buttons.

The code increments and decrements the count based on button clicks, saves the count to local storage, resets the count when needed, and updates the display accordingly. The application allows users to interact with the counter, save counts, and reset the count back to zero.

Testing and Debugging

To test the application in your web browser, follow the steps below:

Open the HTML File: Make sure you have saved all your HTML, CSS, and JavaScript files in the same folder as stated earlier. Then, open the HTML file in your web browser by double-clicking on it. This will open the file in your default web browser.
Inspect Element: Once the app is loaded in the browser, right-click on the page and select “Inspect” or press “Ctrl+Shift+I” to open the developer tools. This will allow you to see any errors in the console and inspect elements on the page.
Test Functionality: Interact with your app to test its functionality. This will help you identify any bugs or issues in your code.
Debugging: If you encounter any errors or issues, use the console in the developer tools to debug your JavaScript code. Look for error messages and line numbers to pinpoint where the issue is occurring.
Make Changes: If you need to make changes to your code, go back to your code editor, make the necessary adjustments, save the file, and then refresh the browser to see the changes reflected in your app.

Lessons Learned

This project taught me the importance of planning and designing the application logic before coding. I also improved my understanding of CSS stylings, JavaScript events, and DOM manipulation, which are crucial for creating interactive web applications.

Deployment

The People Counter application project is available on GitHub Pages and can be accessed online by clicking the link below:

Test the Application: https://wasiu-akindoyin.github.io/People-Counter-Web-Application/

You can access the GitHub repository here to view or contribute to the source code.

Future Improvements

In the future, I plan to add additional features, including:

Enhanced User Interface: Improve the application’s design to make it more visually appealing and user-friendly.
Multiple Counters: Add support for multiple counters, allowing users to track counts for different areas or purposes simultaneously.
Mobile Responsiveness: Ensure the app is fully responsive and functions well on mobile devices.

Conclusion

The People Counter application is a simple yet effective tool for tracking the number of people entering a specified area. With its user-friendly interface and easy customization options, it can be adapted to various use cases. The People Counter Application can be a game-changer for event management, providing organizers with a powerful tool to streamline operations, optimize attendee experiences, and drive success.

If you find this project guide helpful, please clap, share, and follow me to learn more about front-end development, blockchain networks, and a whole lot more. Thank you for sticking around till the end, and see you on the next one.