JavaScript · الدرس ٤ من ٤

أضف التفاعل إلى صفحتك

اجمع الترحيب والعدّاد وزر إظهار النبذة في صفحتك الشخصية. راجع الكود الذي بنيته، أو اكتبه إذا بدأت من هنا.

جرّب الآن

اجعل الأزرار الثلاثة تعمل في صفحتك: رسالة ترحيب من اختيارك، وزيادة العدّاد، وإظهار نبذتك وإخفاؤها. حسّن الرسائل وجرّب كل زر أكثر من مرة.

يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها، ثم استخدم اسم ملفها عند إضافة الصورة إلى كودك.

        JavaScript · script.js
        عدّل HTML وCSS لمشروعك
            HTML · index.html<h1>سارة</h1>
<button id="greet">رحّب بي</button>
<p id="message"></p>
<button id="count">أضف ضغطة</button>
<p id="total">0</p>
<button id="toggle">اعرض نبذتي</button>
<p id="details" hidden>أتعلّم بناء المواقع.</p>
            CSS · style.cssbody { font-family: sans-serif; padding: 16px; color: #12211f; background: #fcfbf7; } h1 { font-size: 24px; } button { font: inherit; padding: 6px 12px; color: #fff; background: #0c4b3c; border: 0; border-radius: 6px; cursor: pointer; }
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

تعمل الأزرار الثلاثة وتستطيع شرح كودها؟ نزّل صفحتك الكاملة، ثم تابع المرحلة التالية.

التالي: بناء واجهات حديثة

أحتاج مساعدة

ابدأ بزر واحد. زر الترحيب اسمه greet والرسالة message. زر العدّاد count والعدد total. زر النبذة toggle والنبذة details. ارجع إلى الدروس السابقة لتراجع طريقة التعامل مع كل واحد.

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك