「The People Counter」の構築: 子供の頃の数え方から現代のウェブサイトへの旅
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1673
14
1428
52
1333
25
1278
29
1257
24
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：コミュニティ、ライブラリ、リソース
Apr 15, 2025 am 12:16 AM
PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
Python vs. JavaScript：開発環境とツール
Apr 26, 2025 am 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScript通訳者とコンパイラにおけるC/Cの役割
Apr 20, 2025 am 12:01 AM
CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
Python vs. JavaScript：ユースケースとアプリケーションと比較されます
Apr 21, 2025 am 12:01 AM
Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
