ホームページ > 記事 > ウェブフロントエンド > 「The People Counter」の構築: 子供の頃の数え方から現代のウェブサイトへの旅
「The People Counter」の構築: 子供の頃の数え方から現代のウェブサイトへの旅
- 王林オリジナル
- 2024-08-18 00:00:36914ブラウズ
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 にリセットして、次のカウント セッションを新たに開始します。
アプリの使用方法
カウントを増やす:
「増分」ボタンをクリックしてカウントを 1 増やします。表示される数値はリアルタイムで更新されます。
カウントを保存:
「保存」ボタンをクリックして、現在のカウントを記録します。カウントは以前のエントリのリストに追加され、表示は 0 にリセットされます。
前のエントリを表示:
保存されたカウントは「以前のエントリ」セクションの下に表示され、そこでカウント履歴を確認できます。
学んだ教訓
People Counter の構築は、特に Scrimba のチュートリアルに続いて、洞察力に富んだ経験でした。 HTML、CSS、JavaScript の重要な概念を強化し、機能的で応答性の高い Web アプリケーションを作成する方法を示しました。
結論
People Counter は、少しのコーディング知識があれば、シンプルなアイデアが実用的なツールにどのように進化できるかを証明します。人や物体を追跡している場合でも、単に数字を楽しんでいる場合でも、このアプリは長年の習慣に対する最新のソリューションを提供します。
以上が「The People Counter」の構築: 子供の頃の数え方から現代のウェブサイトへの旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。