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 = 0let 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:

increment Function:

save Function:

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.

","image":"http://www.luping.net/uploads/20240902/172524384466d521c4a3f5f.jpg","datePublished":"2024-09-02T10:24:04+08:00","dateModified":"2024-09-02T10:24:04+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Online tools
Software tutorial
Site navigation
Programming
Front page > Programming > Building \"The People Counter\": A Journey from Childhood Counting to Modern Website

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

Published on 2024-09-02
Browse:170

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

  1. 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.

  2. 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.

  3. 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.



    The People Counter

        
The People Counter

        

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

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.

Release Statement This article is reproduced at: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 If there is any infringement, please Contact [email protected] to delete
Latest tutorial More>
ClassificationMore>
Learn japanese Learn Korean Learn Chinese Learn foreign language Game Common problem Technology peripherals AI Software tutorial Programming Article

Study Chinese

ToolMore>
Image base64 decoding
Chinese Pinyin
Unicode encoding
JS obfuscation encryption compression
URL hexadecimal encryption tool
UTF-8 encoding conversion tool
Online Ascii encoding and decoding tools
MD5 encryption tool
Hash/Hash text online encryption and decryption tool
Online SHA encryption

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3