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 = 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}

Explication:

Déclaration de variables :

fonction d'incrémentation :

enregistrer la fonction :

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.

Enregistrez 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, en particulier suite à un tutoriel sur Scrimba. Il a renforcé les concepts clés de HTML, CSS et JavaScript et a dé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.

","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"}}
"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Outils en ligne
Tutoriel logiciel
Navigation sur les sites
La programmation
Page de garde > La programmation > 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

Publié le 2024-09-02
Parcourir:748

Building \

Introduction

Vous est-il déjà arrivé de compter des personnes ou des objets juste pour vous amuser ? C'était certainement le cas lorsque j'étais enfant, qu'il s'agisse du nombre de voitures qui passaient ou du nombre de personnes dans une pièce. Cette simple habitude a déclenché l’idée derrière mon projet : The People Counter.

L'objectif principal de la création de The People Counter était de se plonger dans JavaScript, de comprendre sa syntaxe et de se familiariser avec son flux. Bien que je l'ai nommé « The People Counter », le concept est polyvalent et peut être adapté à tout type de comptoir, qu'il s'agisse d'un comptoir de voiture, d'un comptoir de maison, d'un comptoir de caramel ou même d'un comptoir étoilé. Il s'agit fondamentalement d'une contre-application qui aide à comprendre les bases de la programmation JavaScript.

Ce projet a été construit à l'aide des ressources de la plateforme d'apprentissage Scrimba, qui ont fourni des informations et des conseils précieux tout au long du processus de développement.

Cliquez pour voir l'application en action !

Le compteur de personnes est conçu pour fournir un moyen simple et efficace de suivre et de gérer les décomptes, tout en mettant en valeur la puissance du HTML, du CSS et du JavaScript.

Des fonctionnalités qui rendent le comptage amusant

  1. Comptage en temps réel
    Gardez une trace de votre décompte d'un simple clic sur le bouton "Incrémenter". Fini le décompte manuel !

    Cette fonctionnalité met à jour le décompte affiché instantanément chaque fois que vous cliquez sur le bouton.

  2. Enregistrer et afficher les entrées
    Enregistrez vos décomptes et affichez un historique des entrées précédentes. Parfait pour suivre plusieurs décomptes au fil du temps.


    Les décomptes enregistrés sont ajoutés à une liste sous le bouton, vous permettant de consulter l'historique de vos décomptes.

  3. 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.
    La conception de l'application est superbe sur tous les appareils, améliorant ainsi l'expérience utilisateur.

Technologies qui alimentent l'application

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



    The People Counter

        
The People Counter

        

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

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 de variables :

  • let count = 0; : initialise un nombre de variables pour suivre le 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'affecte à 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 nombre affiché à 0 après l'enregistrement.
  • count = 0; : réinitialise la variable de comptage à 0 pour recommencer 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.

Enregistrez 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, en particulier suite à un tutoriel sur Scrimba. Il a renforcé les concepts clés de HTML, CSS et JavaScript et a dé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.

Déclaration de sortie Cet article est reproduit sur : https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 S'il y a toute infraction, veuillez contacter [email protected] pour supprimer
Dernier tutoriel Plus>
ClassificationPlus>
Apprendre le japonais Apprendre le coréen Apprendre le chinois Apprendre une langue étrangère Jeu Problème commun Périphériques technologiques IA Tutoriel logiciel La programmation Article

Étudier le chinois

OutilPlus>
Décodage d'images en base64
Pinyin chinois
Encodage Unicode
Compression de chiffrement d'obscurcissement JS
Outil de chiffrement hexadécimal d'URL
Outil de conversion d'encodage UTF-8
Outils d'encodage et de décodage Ascii en ligne
Outil de cryptage MD5
Outil de cryptage et de décryptage en ligne de texte de hachage/hachage
Cryptage SHA en ligne

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3