Membina \'The People Counter\': Perjalanan dari Mengira Masa Kanak-Kanak ke Laman Web Moden-tutorial js-php.cn

Membina \'The People Counter\': Perjalanan dari Mengira Masa Kanak-Kanak ke Laman Web Moden

王林

Lepaskan： 2024-08-18 00:00:36

asal

903 orang telah melayarinya

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

Kiraan yang disimpan ditambahkan pada senarai di bawah butang, membolehkan anda menyemak sejarah kiraan anda.
Reka Bentuk yang Elegan dan Responsif
Apl ini menyesuaikan dengan lancar kepada pelbagai saiz skrin, memastikan antara muka yang bersih dan moden sama ada anda menggunakan desktop atau peranti mudah alih.
Reka bentuk apl kelihatan hebat pada semua peranti, meningkatkan pengalaman pengguna.

Teknologi yang Menguasakan Apl

HTML : Tulang belakang aplikasi, menyediakan struktur penting.

<!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>

Salin selepas log masuk

CSS
Untuk menggayakan apl, anda boleh menggunakan CSS untuk menjadikannya menarik dan responsif secara visual. (Memandangkan bahagian ini lebih memfokuskan pada JavaScript, saya akan melangkau CSS terperinci di sini.)

JavaScript
Membawa interaktiviti ke apl dengan fungsi dinamik.

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
}

Salin selepas log masuk

Penjelasan:

Pengisytiharan Pembolehubah:

biar kira = 0;: Memulakan kiraan pembolehubah untuk menjejaki bilangan kenaikan.
let countEl = document.getElementById("count-el");: Dapatkan semula elemen HTML tempat kiraan semasa dipaparkan dan berikannya kepada countEl.
let saveEl = document.getElementById("save-el");: Mendapatkan semula elemen HTML di mana kiraan yang disimpan akan dipaparkan dan menyerahkannya kepada saveEl.

Fungsi kenaikan:

kiraan += 1;: Meningkatkan pembolehubah kiraan sebanyak 1 setiap kali fungsi dipanggil.
countEl.textContent = count;: Mengemas kini kiraan yang dipaparkan dalam elemen countEl untuk mencerminkan nilai baharu.

Fungsi simpan:

let countStr = count + " - ";: Mencipta rentetan daripada kiraan semasa dan menambahkan sempang untuk pemisahan.
saveEl.textContent += countStr;: Menambah rentetan kiraan baharu pada senarai kiraan yang disimpan sedia ada dalam elemen saveEl.
countEl.textContent = 0;: Menetapkan semula kiraan yang dipaparkan kepada 0 selepas disimpan.
kiraan = 0;: Menetapkan semula pembolehubah kiraan kepada 0 untuk bermula baharu untuk sesi pengiraan seterusnya.

Cara Menggunakan Apl

Naikkan Kiraan:
Klik butang "Kenaikan" untuk menambah kiraan sebanyak 1. Nombor yang dipaparkan akan dikemas kini dalam masa nyata.

Simpan Kiraan:
Klik butang "Simpan" untuk log kiraan semasa. Kiraan akan ditambahkan pada senarai entri sebelumnya dan paparan akan ditetapkan semula kepada 0.

Lihat Entri Sebelumnya:
Kiraan yang disimpan akan dipaparkan di bawah bahagian "Entri Sebelumnya", di mana anda boleh menyemak sejarah kiraan anda.

Pelajaran yang Diperoleh

Membina Kaunter Rakyat merupakan pengalaman yang bernas, terutamanya mengikuti tutorial tentang Scrimba. Ia memperkukuh konsep utama dalam HTML, CSS dan JavaScript serta menunjukkan cara mencipta aplikasi web yang berfungsi dan responsif.

Kesimpulan

The People Counter berfungsi sebagai bukti bagaimana idea mudah boleh berkembang menjadi alat praktikal dengan sedikit pengetahuan pengekodan. Sama ada anda menjejaki orang, objek atau hanya berseronok dengan nombor, apl ini menyediakan penyelesaian moden untuk tabiat lama.

Atas ialah kandungan terperinci Membina \'The People Counter\': Perjalanan dari Mengira Masa Kanak-Kanak ke Laman Web Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!