Heim >Web-Frontend >js-Tutorial >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

王林Original: 2024-08-18 00:00:36919Durchsuche

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

Gespeicherte Zählungen werden einer Liste unterhalb der Schaltfläche hinzugefügt, sodass Sie Ihren Zählverlauf überprüfen können.
Elegantes und ansprechendes Design
Die App passt sich nahtlos an verschiedene Bildschirmgrößen an und gewährleistet 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.

<!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
Um die App optisch ansprechend und reaktionsfähig zu gestalten, können Sie CSS verwenden, um sie 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
}

Erklärung:

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.

Inkrementfunktion:

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.

Funktion speichern:

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.

Fazit

Der People Counter ist ein Beweis dafür, wie einfache Ideen mit ein wenig Programmierkenntnissen zu praktischen Werkzeugen werden können. Egal, 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.

Das obige ist der detaillierte Inhalt vonAufbau von „The People Counter': Eine Reise vom Zählen in der Kindheit zur modernen Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen einer dynamischen Routensprache für i in Astro BuildNächster Artikel：Erstellen einer dynamischen Routensprache für i in Astro Build

In Verbindung stehende Artikel

Mehr sehen