CSS
Zum Gestalten der App können Sie CSS verwenden, um sie optisch ansprechend und reaktionsfähig zu gestalten. (Da sich dieser Abschnitt mehr auf JavaScript konzentriert, überspringe ich hier detailliertes CSS.)

JavaScript
Interaktivität mit dynamischer Funktionalität in die App bringen.

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}

Erläuterung:

Variablendeklaration:

Inkrementierungsfunktion:

Speicherfunktion:

So verwenden Sie die App

Erhöhen Sie die Anzahl:
Klicken Sie auf die Schaltfläche „Erhöhen“, um die Anzahl um 1 zu erhöhen. Die angezeigte Zahl wird in Echtzeit aktualisiert.

Speichern Sie die Zählung:
Klicken Sie auf die Schaltfläche „Speichern“, um den aktuellen Zählerstand zu protokollieren. Der Zählerstand wird zur Liste der vorherigen Einträge hinzugefügt und die Anzeige wird auf 0 zurückgesetzt.

Vorherige Einträge anzeigen:
Die gespeicherten Zählungen werden unterhalb des Abschnitts „Vorherige Einträge“ angezeigt, wo Sie Ihren Zählverlauf überprüfen können.

Lessons Learned

Der Aufbau des People Counter war eine aufschlussreiche Erfahrung, insbesondere nach einem Tutorial zu Scrimba. Es vertiefte Schlüsselkonzepte in HTML, CSS und JavaScript und zeigte, wie man eine funktionale, reaktionsfähige Webanwendung erstellt.

Abschluss

Der People Counter ist ein Beweis dafür, wie einfache Ideen mit ein wenig Programmierkenntnissen zu praktischen Werkzeugen werden können. Ob Sie Personen oder Objekte verfolgen oder einfach nur Spaß mit Zahlen haben, diese App bietet eine moderne Lösung für eine uralte Gewohnheit.

","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"}}
„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Online-Tools
Software-Tutorial
Seitennavigation
Programmierung
Titelseite > Programmierung > Aufbau von „The People Counter“: Eine Reise vom Zählen in der Kindheit zur modernen Website

Aufbau von „The People Counter“: Eine Reise vom Zählen in der Kindheit zur modernen Website

Veröffentlicht am 02.09.2024
Durchsuche:958

Building \

Einführung

Haben Sie schon einmal das Gefühl, Menschen oder Gegenstände nur zum Spaß zu zählen? Als Kind habe ich das auf jeden Fall getan, sei es an der Anzahl der vorbeifahrenden Autos oder an der Anzahl der Personen, die sich in einem Raum befanden. Aus dieser einfachen Angewohnheit entstand die Idee hinter meinem Projekt: The People Counter.

Das Hauptziel bei der Erstellung von The People Counter bestand darin, in JavaScript einzutauchen, seine Syntax zu verstehen und sich mit seinem Ablauf vertraut zu machen. Obwohl ich es „The People Counter“ genannt habe, ist das Konzept vielseitig und kann an jede Art von Theke angepasst werden – sei es eine Autotheke, eine Haustheke, eine Toffee-Theke oder sogar eine Star-Theke. Es handelt sich im Grunde um eine Counter-App, die dabei hilft, die Grundlagen der JavaScript-Programmierung zu verstehen.

Dieses Projekt wurde mit Ressourcen der Scrimba-Lernplattform erstellt, die während des gesamten Entwicklungsprozesses wertvolle Einblicke und Anleitungen lieferte.

Klicken Sie, um die App in Aktion zu sehen!

Der People Counter soll eine einfache und effektive Möglichkeit bieten, Zählungen zu verfolgen und zu verwalten und gleichzeitig die Leistungsfähigkeit von HTML, CSS und JavaScript zu demonstrieren.

Funktionen, die das Zählen zum Spaß machen

  1. Echtzeitzählung
    Verfolgen Sie Ihre Zählung mit einem einfachen Klick auf die Schaltfläche „Erhöhen“. Kein manuelles Auszählen mehr!

    Diese Funktion aktualisiert die angezeigte Anzahl sofort, jedes Mal, wenn Sie auf die Schaltfläche klicken.

  2. Einträge speichern und anzeigen
    Protokollieren Sie Ihre Zählungen und sehen Sie sich den Verlauf früherer Einträge an. Perfekt, um mehrere Zählungen im Laufe der Zeit im Auge zu behalten.


    Gespeicherte Zählungen werden zu einer Liste unterhalb der Schaltfläche hinzugefügt, sodass Sie Ihren Zählverlauf überprüfen können.

  3. Elegantes und ansprechendes Design
    Die App passt sich nahtlos an verschiedene Bildschirmgrößen an und sorgt für eine saubere, moderne Benutzeroberfläche, egal ob Sie einen Desktop oder ein mobiles Gerät verwenden.
    Das Design der App sieht auf allen Geräten gut aus und verbessert das Benutzererlebnis.

Technologien, die die App antreiben

HTML: Das Rückgrat der Anwendung, das die wesentliche Struktur bereitstellt.



    The People Counter

        
The People Counter

        

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

CSS
Zum Gestalten der App können Sie CSS verwenden, um sie optisch ansprechend und reaktionsfähig zu gestalten. (Da sich dieser Abschnitt mehr auf JavaScript konzentriert, überspringe ich hier detailliertes CSS.)

JavaScript
Interaktivität mit dynamischer Funktionalität in die App bringen.

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
}

Erläuterung:

Variablendeklaration:

  • let count = 0;: Initialisiert eine Variable count, um die Anzahl der Inkremente zu verfolgen.
  • let countEl = document.getElementById("count-el");: Ruft das HTML-Element ab, in dem die aktuelle Anzahl angezeigt wird, und weist es countEl zu.
  • let saveEl = document.getElementById("save-el");: Ruft das HTML-Element ab, in dem die gespeicherten Zählungen angezeigt werden, und weist es saveEl zu.

Inkrementierungsfunktion:

  • count = 1;: Erhöht die Zählvariable bei jedem Aufruf der Funktion um 1.
  • countEl.textContent = count;: Aktualisiert die angezeigte Anzahl im countEl-Element, um den neuen Wert widerzuspiegeln.

Speicherfunktion:

  • let countStr = count " - ";: Erstellt eine Zeichenfolge aus der aktuellen Anzahl und hängt einen Bindestrich zur Trennung an.
  • saveEl.textContent = countStr;: Fügt die neue Zählzeichenfolge zur vorhandenen Liste der gespeicherten Zählungen im saveEl-Element hinzu.
  • countEl.textContent = 0;: Setzt den angezeigten Zähler nach dem Speichern auf 0 zurück.
  • count = 0;: Setzt die Zählvariable auf 0 zurück, um für die nächste Zählsitzung neu zu beginnen.

So verwenden Sie die App

Erhöhen Sie die Anzahl:
Klicken Sie auf die Schaltfläche „Erhöhen“, um die Anzahl um 1 zu erhöhen. Die angezeigte Zahl wird in Echtzeit aktualisiert.

Speichern Sie die Zählung:
Klicken Sie auf die Schaltfläche „Speichern“, um den aktuellen Zählerstand zu protokollieren. Der Zählerstand wird zur Liste der vorherigen Einträge hinzugefügt und die Anzeige wird auf 0 zurückgesetzt.

Vorherige Einträge anzeigen:
Die gespeicherten Zählungen werden unterhalb des Abschnitts „Vorherige Einträge“ angezeigt, wo Sie Ihren Zählverlauf überprüfen können.

Lessons Learned

Der Aufbau des People Counter war eine aufschlussreiche Erfahrung, insbesondere nach einem Tutorial zu Scrimba. Es vertiefte Schlüsselkonzepte in HTML, CSS und JavaScript und zeigte, wie man eine funktionale, reaktionsfähige Webanwendung erstellt.

Abschluss

Der People Counter ist ein Beweis dafür, wie einfache Ideen mit ein wenig Programmierkenntnissen zu praktischen Werkzeugen werden können. Ob Sie Personen oder Objekte verfolgen oder einfach nur Spaß mit Zahlen haben, diese App bietet eine moderne Lösung für eine uralte Gewohnheit.

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 Falls vorhanden Bei Verstößen wenden Sie sich bitte an [email protected], um die Löschung vorzunehmen
Neuestes Tutorial Mehr>
EinstufungMehr>
Japanisch lernen Koreanisch lernen Chinesisch lernen Fremdsprache lernen Spiel Häufiges Problem Technologie-Peripheriegeräte KI Software-Tutorial Programmierung Artikel

Chinesisch lernen

WerkzeugMehr>
Bildbase64-Dekodierung
Chinesisches Pinyin
Unicode-Kodierung
Komprimierung der JS-Verschleierungsverschlüsselung
URL-Hexadezimal-Verschlüsselungstool
Konvertierungstool für UTF-8-Kodierung
Online-Tools zur ASCII-Kodierung und -Dekodierung
MD5-Verschlüsselungstool
Hash/Hash-Text-Online-Verschlüsselungs- und Entschlüsselungstool
Online-SHA-Verschlüsselung

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3