CSS
لتصميم التطبيق، يمكنك استخدام CSS لجعله جذابًا وسريع الاستجابة. (نظرًا لأن هذا القسم يركز بشكل أكبر على JavaScript، فسوف أتخطى تفاصيل CSS هنا.)

جافا سكريبت
جلب التفاعل إلى التطبيق من خلال الوظائف الديناميكية.

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.

عرض الإدخالات السابقة:
ستظهر الأعداد المحفوظة أسفل قسم \\\"الإدخالات السابقة\\\"، حيث يمكنك مراجعة سجل الأعداد الخاصة بك.

الدروس المستفادة

كانت تجربة بناء عداد الأشخاص بمثابة تجربة ثاقبة، خاصة بعد البرنامج التعليمي حول Scrimba. لقد عزز المفاهيم الأساسية في HTML وCSS وJavaScript وأظهر كيفية إنشاء تطبيق ويب فعال وسريع الاستجابة.

خاتمة

يعد 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-09-02
تصفح:693

Building \

مقدمة

هل وجدت نفسك تحسب الأشخاص أو الأشياء من أجل المتعة فقط؟ بالتأكيد فعلت ذلك عندما كنت طفلاً، سواء كان الأمر يتعلق بعدد السيارات المارة أو عدد الأشخاص الموجودين في الغرفة. هذه العادة البسيطة هي التي أوقدت ​​فكرة مشروعي: The People Counter.

كان الهدف الأساسي من إنشاء The People Counter هو التعمق في لغة JavaScript، وفهم تركيبها، والارتياح لتدفقها. على الرغم من أنني أطلقت عليه اسم "عداد الأشخاص"، إلا أن المفهوم متعدد الاستخدامات ويمكن تكييفه مع أي نوع من العدادات - سواء كان ذلك عداد السيارة، أو عداد المنزل، أو عداد الحلوى، أو حتى عداد النجوم. إنه في الأساس تطبيق مضاد يساعد في فهم أساسيات برمجة JavaScript.

تم إنشاء هذا المشروع باستخدام موارد من منصة التعلم Scrimba، والتي قدمت رؤى وإرشادات قيمة طوال عملية التطوير.

انقر لعرض التطبيق أثناء العمل!

تم تصميم عداد الأشخاص لتوفير طريقة سهلة وفعالة لتتبع الأعداد وإدارتها، كل ذلك مع عرض قوة HTML وCSS وJavaScript.

ميزات تجعل العد ممتعًا

  1. العد في الوقت الحقيقي
    تتبع عددك بنقرة بسيطة على زر "الزيادة". لا مزيد من الفرز اليدوي!

    تقوم هذه الميزة بتحديث العدد المعروض على الفور في كل مرة تنقر فيها على الزر.

  2. حفظ وعرض الإدخالات
    تسجيل التهم الخاصة بك وعرض تاريخ الإدخالات السابقة. مثالية لتتبع الأعداد المتعددة مع مرور الوقت.


    تتم إضافة الأعداد المحفوظة إلى القائمة الموجودة أسفل الزر، مما يسمح لك بمراجعة سجل الأعداد الخاص بك.

  3. تصميم أنيق وسريع الاستجابة
    يتكيف التطبيق بسلاسة مع أحجام الشاشات المختلفة، مما يضمن واجهة نظيفة وحديثة سواء كنت تستخدم جهاز كمبيوتر سطح المكتب أو جهازًا محمولاً.
    يبدو تصميم التطبيق رائعًا على جميع الأجهزة، مما يعزز تجربة المستخدم.

التقنيات التي تدعم التطبيق

HTML : العمود الفقري للتطبيق، ويوفر البنية الأساسية.



    The People Counter

        
The People Counter

        

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

CSS
لتصميم التطبيق، يمكنك استخدام CSS لجعله جذابًا وسريع الاستجابة. (نظرًا لأن هذا القسم يركز بشكل أكبر على JavaScript، فسوف أتخطى تفاصيل CSS هنا.)

جافا سكريبت
جلب التفاعل إلى التطبيق من خلال الوظائف الديناميكية.

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;: تهيئة عدد متغير لتتبع عدد الزيادات.
  • let countEl = document.getElementById("count-el");: استرداد عنصر HTML حيث يتم عرض العدد الحالي وتعيينه إلى countEl.
  • let saveEl = document.getElementById("save-el");: استرداد عنصر HTML حيث سيتم عرض الأعداد المحفوظة وتعيينه لـ saveEl.

وظيفة الزيادة:

  • count = 1;: زيادة متغير العدد بمقدار 1 في كل مرة يتم فيها استدعاء الوظيفة.
  • countEl.textContent = count;: تحديث العدد المعروض في عنصر countEl ليعكس القيمة الجديدة.

وظيفة الحفظ :

  • let countStr = count " - ";: إنشاء سلسلة من العدد الحالي وإلحاق شرطة للفصل.
  • saveEl.textContent = countStr;: إضافة سلسلة العد الجديدة إلى قائمة الأعداد المحفوظة الموجودة في عنصر saveEl.
  • countEl.textContent = 0;: إعادة تعيين العدد المعروض إلى 0 بعد الحفظ.
  • count = 0;: إعادة تعيين متغير العدد إلى 0 للبدء من جديد لجلسة العد التالية.

كيفية استخدام التطبيق

زيادة العدد:
انقر فوق الزر "زيادة" لزيادة العدد بمقدار 1. سيتم تحديث الرقم المعروض في الوقت الفعلي.

حفظ العدد:
انقر فوق الزر "حفظ" لتسجيل العدد الحالي. سيتم إضافة العدد إلى قائمة الإدخالات السابقة، وسيتم إعادة تعيين العرض إلى 0.

عرض الإدخالات السابقة:
ستظهر الأعداد المحفوظة أسفل قسم "الإدخالات السابقة"، حيث يمكنك مراجعة سجل الأعداد الخاصة بك.

الدروس المستفادة

كانت تجربة بناء عداد الأشخاص بمثابة تجربة ثاقبة، خاصة بعد البرنامج التعليمي حول Scrimba. لقد عزز المفاهيم الأساسية في HTML وCSS وJavaScript وأظهر كيفية إنشاء تطبيق ويب فعال وسريع الاستجابة.

خاتمة

يعد People Counter بمثابة شهادة على كيفية تطور الأفكار البسيطة إلى أدوات عملية مع القليل من المعرفة بالبرمجة. سواء كنت تتتبع الأشخاص أو الأشياء أو تستمتع فقط بالأرقام، فإن هذا التطبيق يوفر حلاً حديثًا لعادة قديمة.

بيان الافراج تم إعادة إنتاج هذه المقالة على: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] للحذف
أحدث البرنامج التعليمي أكثر>
تصنيفأكثر>
تعلم اليابانية تعلم اللغة الكورية تعلم اللغة الصينية تعلم لغة أجنبية لعبة مشكلة شائعة ملحقات التكنولوجيا منظمة العفو الدولية برنامج تعليمي برمجة شرط

دراسة اللغة الصينية

أداةأكثر>
فك تشفير الصورة Base64
بينيين الصينية
ترميز يونيكود
JS ضغط تشفير التشويش
أداة تشفير URL الست عشري
أداة تحويل ترميز UTF-8
أدوات تشفير وفك تشفير Ascii عبر الإنترنت
أداة التشفير MD5
أداة تشفير وفك تشفير النصوص Hash/Hash عبر الإنترنت
تشفير SHA عبر الإنترنت

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3