「The People Counter」の構築: 子供の頃の数え方から現代のウェブサイトへの旅-jsチュートリアル-php.cn

「The People Counter」の構築: 子供の頃の数え方から現代のウェブサイトへの旅

王林

リリース： 2024-08-18 00:00:36

オリジナル

903 人が閲覧しました

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

保存されたカウントはボタンの下のリストに追加され、カウント履歴を確認できるようになります。
エレガントでレスポンシブなデザイン
このアプリはさまざまな画面サイズにシームレスに適応し、デスクトップでもモバイルデバイスでも、クリーンでモダンなインターフェイスを保証します。
アプリのデザインはどのデバイスでも見栄えがよく、ユーザーエクスペリエンスが向上します。

アプリを強化するテクノロジー

HTML : アプリケーションのバックボーンであり、重要な構造を提供します。

<!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
アプリのスタイルを設定するには、CSS を使用して、アプリを視覚的に魅力的で応答性の高いものにすることができます。 (このセクションは JavaScript に重点を置いているため、ここでは詳細な CSS は省略します。)

JavaScript
動的な機能によりアプリにインタラクティブ性をもたらします。

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
}

ログイン後にコピー

説明:

変数宣言:

let count = 0;: 増分数を追跡するために変数 count を初期化します。
let countEl = document.getElementById("count-el");: 現在のカウントが表示される HTML 要素を取得し、それを countEl に割り当てます。
let saveEl = document.getElementById("save-el");: 保存されたカウントが表示される HTML 要素を取得し、それを saveEl に割り当てます。

インクリメント関数:

count += 1;: 関数が呼び出されるたびに、count 変数を 1 ずつ増やします。
countEl.textContent = count;: countEl 要素に表示されているカウントを更新して、新しい値を反映します。

保存関数:

let countStr = count + " - ";: 現在のカウントから文字列を作成し、区切るためにダッシュを追加します。
saveEl.textContent += countStr;: 新しいカウント文字列を、saveEl 要素内の保存されたカウントの既存のリストに追加します。
countEl.textContent = 0;: 保存後に表示カウントを 0 にリセットします。
count = 0;: count 変数を 0 にリセットして、次のカウントセッションを新たに開始します。