Maison > Article > interface Web > Construire « le compteur de personnes » : un voyage du comptage des enfants au site Web moderne

Construire « le compteur de personnes » : un voyage du comptage des enfants au site Web moderne

王林original: 2024-08-18 00:00:36916parcourir

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

Les décomptes enregistrés sont ajoutés à une liste sous le bouton, vous permettant de consulter l'historique de vos décomptes.
Design élégant et réactif
L'application s'adapte parfaitement à différentes tailles d'écran, garantissant une interface claire et moderne, que vous soyez sur un ordinateur de bureau ou un appareil mobile.
Le design de l'application est superbe sur tous les appareils, améliorant ainsi l'expérience utilisateur.

Les technologies qui alimentent l'application

HTML : L'épine dorsale de l'application, fournissant la structure essentielle.

<!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
Pour styliser l'application, vous pouvez utiliser CSS pour la rendre visuellement attrayante et réactive. (Étant donné que cette section est davantage axée sur JavaScript, je vais ignorer le CSS détaillé ici.)

JavaScript
Apporter de l'interactivité à l'application avec des fonctionnalités dynamiques.

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
}

Explication :

Déclaration des variables :

let count = 0; : initialise un nombre de variables pour garder une trace du nombre d'incréments.
let countEl = document.getElementById("count-el"); : Récupère l'élément HTML où le décompte actuel est affiché et l'affecte à countEl.
let saveEl = document.getElementById("save-el"); : Récupère l'élément HTML où les décomptes enregistrés seront affichés et l'attribue à saveEl.

Fonction d'incrémentation :

count += 1; : Augmente la variable count de 1 à chaque fois que la fonction est appelée.
countEl.textContent = count; : met à jour le nombre affiché dans l'élément countEl pour refléter la nouvelle valeur.

enregistrer la fonction :

let countStr = count + " - "; : Crée une chaîne à partir du nombre actuel et ajoute un tiret pour la séparation.
saveEl.textContent += countStr; : ajoute la nouvelle chaîne de comptage à la liste existante des décomptes enregistrés dans l'élément saveEl.
countEl.textContent = 0; : Réinitialise le décompte affiché à 0 après la sauvegarde.
count = 0; : réinitialise la variable de comptage à 0 pour repartir à zéro pour la prochaine session de comptage.

Comment utiliser l'application

Incrémenter le nombre :
Cliquez sur le bouton « Incrémenter » pour augmenter le nombre de 1. Le nombre affiché sera mis à jour en temps réel.

Sauvez le compte :
Cliquez sur le bouton "Enregistrer" pour enregistrer le décompte actuel. Le décompte sera ajouté à la liste des entrées précédentes et l'affichage sera réinitialisé à 0.

Afficher les entrées précédentes :
Les décomptes enregistrés apparaîtront sous la section « Entrées précédentes », où vous pourrez consulter l'historique de vos décomptes.

Leçons apprises

Construire The People Counter a été une expérience enrichissante, notamment suite à un tutoriel sur Scrimba. Il a renforcé les concepts clés de HTML, CSS et JavaScript et a montré comment créer une application Web fonctionnelle et réactive.

Conclusion

Le People Counter témoigne de la façon dont des idées simples peuvent évoluer en outils pratiques avec un peu de connaissances en codage. Que vous suiviez des personnes, des objets ou que vous vous amusiez simplement avec des chiffres, cette application offre une solution moderne à une habitude séculaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Création d'un langage d'itinéraire dynamique pour i dans Astro BuildArticle suivant：Création d'un langage d'itinéraire dynamique pour i dans Astro Build

Articles Liés

Voir plus