Home > Article > Web Front-end > Building \'The People Counter\': A Journey from Childhood Counting to Modern Website

Building \'The People Counter\': A Journey from Childhood Counting to Modern Website

王林Original: 2024-08-18 00:00:36913browse

$Building \$

Introduction

Ever find yourself counting people or objects just for fun? I certainly did as a child, whether it was the number of cars passing by or how many people were in a room. This simple habit sparked the idea behind my project: The People Counter.

The primary goal of creating The People Counter was to dive into JavaScript, understand its syntax, and get comfortable with its flow. While I named it “The People Counter,” the concept is versatile and can be adapted to any type of counter—be it a car counter, house counter, toffee counter, or even a star counter. It’s fundamentally a counter app that helps in grasping the basics of JavaScript programming.

This project was built using resources from the Scrimba learning platform, which provided valuable insights and guidance throughout the development process.

Click to view the app in action!

The People Counter is designed to provide an easy, effective way to track and manage counts, all while showcasing the power of HTML, CSS, and JavaScript.

Features That Make Counting Fun

Real-Time Counting
Keep track of your count with a simple click of the "Increment" button. No more manual tallying!

This feature updates the displayed count instantly each time you click the button.
Save and View Entries
Log your counts and view a history of previous entries. Perfect for keeping track of multiple counts over time.

Saved counts are added to a list below the button, allowing you to review your count history.
Elegant and Responsive Design
The app adapts seamlessly to various screen sizes, ensuring a clean, modern interface whether you're on a desktop or mobile device.
The app’s design looks great on all devices, enhancing user experience.

Technologies That Power the App

HTML : The backbone of the application, providing the essential structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <title>The People Counter</title>
</head>
<body>
    <div class="app-container">
        <header>
            <h1>The People Counter</h1>
        </header>
        <main class="counter-container">
            <div class="counter-display">
                <div class="counter-frame">
                    <div id="count-el">0</div>
                </div>
            </div>
            <div class="controls">
                <button id="increment-btn" onclick="increment()">
                    <span>Increment</span>
                </button>
                <button id="save-btn" onclick="save()">
                    <span>Save</span>
                </button>
            </div>
            <div class="entries">
                <h2>Previous Entries</h2>
                <div id="save-el" class="entry-list"></div>
            </div>
        </main>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS
For styling the app, you can use CSS to make it visually appealing and responsive. (Since this section is focused more on JavaScript, I'll skip detailed CSS here.)

JavaScript
Bringing interactivity to the app with dynamic functionality.

let count = 0

let countEl = document.getElementById("count-el")

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


function increment() {   
    count += 1
    countEl.textContent = count
}

function save() {
    let countStr = count + " - "
    saveEl.textContent += countStr
    countEl.textContent = 0
    count = 0
}

Explanation:

Variables Declaration:

let count = 0;: Initializes a variable count to keep track of the number of increments.
let countEl = document.getElementById("count-el");: Retrieves the HTML element where the current count is displayed and assigns it to countEl.
let saveEl = document.getElementById("save-el");: Retrieves the HTML element where the saved counts will be displayed and assigns it to saveEl.

increment Function:

count += 1;: Increases the count variable by 1 each time the function is called.
countEl.textContent = count;: Updates the displayed count in the countEl element to reflect the new value.

save Function:

let countStr = count + " - ";: Creates a string from the current count and appends a dash for separation.
saveEl.textContent += countStr;: Adds the new count string to the existing list of saved counts in the saveEl element.
countEl.textContent = 0;: Resets the displayed count to 0 after saving.
count = 0;: Resets the count variable to 0 to start fresh for the next counting session.

How to Use the App

Increment the Count:
Click the "Increment" button to increase the count by 1. The number displayed will update in real-time.

Save the Count:
Click the "Save" button to log the current count. The count will be added to the list of previous entries, and the display will reset to 0.

View Previous Entries:
The saved counts will appear below the "Previous Entries" section, where you can review your count history.

Lessons Learned

Building The People Counter was an insightful experience, particularly following a tutorial on Scrimba. It reinforced key concepts in HTML, CSS, and JavaScript and demonstrated how to create a functional, responsive web application.

Conclusion

The People Counter serves as a testament to how simple ideas can evolve into practical tools with a bit of coding knowledge. Whether you're tracking people, objects, or just having fun with numbers, this app provides a modern solution for an age-old habit.

The above is the detailed content of Building \'The People Counter\': A Journey from Childhood Counting to Modern Website. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html dash String count for while Session using class Interface number function this history display idea

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Creating dynamic route language for i in Astro BuildNext article：Creating dynamic route language for i in Astro Build

See more