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

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

let count = 0let 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}

説明：

変数宣言:

インクリメント関数:

関数を保存:

アプリの使い方

カウントを増やす:
「増加」ボタンをクリックすると、カウントが 1 ずつ増加します。表示される数値はリアルタイムで更新されます。

カウントを保存:
「保存」ボタンをクリックして、現在のカウントを記録します。カウントは以前のエントリのリストに追加され、表示は 0 にリセットされます。

前のエントリを表示:
保存されたカウントは「以前のエントリ」セクションの下に表示され、そこでカウント履歴を確認できます。

学んだ教訓

People Counter の構築は、特に Scrimba のチュートリアルに続いて、洞察力に富んだ経験でした。 HTML、CSS、JavaScript の重要な概念を強化し、機能的で応答性の高い Web アプリケーションを作成する方法を示しました。

結論

People Counter は、少しのコーディング知識があれば、シンプルなアイデアが実用的なツールにどのように進化できるかを証明します。人や物体を追跡している場合でも、単に数字を楽しんでいる場合でも、このアプリは長年の習慣に対する最新のソリューションを提供します。

","image":"http://www.luping.net/uploads/20240902/172524384466d521c4a3f5f.jpg","datePublished":"2024-09-02T10:24:04+08:00","dateModified":"2024-09-02T10:24:04+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
オンラインツール
ソフトウェアチュートリアル
サイトナビゲーション
プログラミング
表紙 > プログラミング > 「ピープル カウンター」の構築: 子供の頃の数え方から現代のウェブサイトへの旅

「ピープル カウンター」の構築: 子供の頃の数え方から現代のウェブサイトへの旅

2024 年 9 月 2 日に公開
ブラウズ：801

Building \

導入

ただ楽しむために人や物を数えていることに気づいたことがありますか?私も子どもの頃、通り過ぎる車の数や部屋に何人いるかなど、確かにそうでした。この単純な習慣が、私のプロジェクトの背後にあるアイデア、The People Counter のきっかけとなりました。

The People Counter を作成する主な目標は、JavaScript を詳しく理解し、その構文を理解し、そのフローに慣れることでした。私はそれを「The People Counter」と名付けましたが、このコンセプトは多用途であり、車のカウンター、家のカウンター、トフィーカウンター、さらにはスターカウンターなど、あらゆる種類のカウンターに適応できます。これは基本的に、JavaScript プログラミングの基礎を理解するのに役立つカウンター アプリです。

このプロジェクトは、開発プロセス全体を通じて貴重な洞察とガイダンスを提供する Scrimba 学習プラットフォームのリソースを使用して構築されました。

クリックして実際のアプリを表示します!

People Counter は、HTML、CSS、JavaScript の機能を活用しながら、カウントを追跡および管理するための簡単かつ効果的な方法を提供するように設計されています。

数えるのが楽しくなる機能

  1. リアルタイムカウント
    「増分」ボタンをクリックするだけでカウントを追跡できます。手動で集計する必要はもうありません!

    この機能は、ボタンをクリックするたびに、表示されるカウントを即座に更新します。

  2. エントリの保存と表示
    カウントを記録し、以前のエントリの履歴を表示します。複数のカウントを長期にわたって追跡するのに最適です。


    保存されたカウントがボタンの下のリストに追加され、カウント履歴を確認できるようになります。

  3. エレガントでレスポンシブなデザイン
    このアプリはさまざまな画面サイズにシームレスに適応し、デスクトップでもモバイル デバイスでも、クリーンでモダンなインターフェイスを保証します。
    アプリのデザインはどのデバイスでも見栄えがよく、ユーザー エクスペリエンスが向上します。

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

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



    The People Counter

        
The People Counter

        

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

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 は、少しのコーディング知識があれば、シンプルなアイデアが実用的なツールにどのように進化できるかを証明します。人や物体を追跡している場合でも、単に数字を楽しんでいる場合でも、このアプリは長年の習慣に対する最新のソリューションを提供します。

リリースステートメント この記事は次の場所に転載されています: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>
分類もっと>
日本語を学ぶ 韓国語を学ぶ 中国語を学びます 外国語を学ぶ ゲーム よくある問題 テクノロジー周辺機器 AI ソフトウェアチュートリアル プログラミング 記事

中国語を勉強する

道具もっと>
画像のbase64デコード
中国語のピンイン
Unicodeエンコーディング
JS難読化暗号化圧縮
URL 16 進暗号化ツール
UTF-8エンコード変換ツール
オンラインの Ascii エンコードおよびデコード ツール
MD5暗号化ツール
ハッシュ/ハッシュ テキストのオンライン暗号化および復号化ツール
オンライン SHA 暗号化

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3