تصميم واجهات المستخدم Development Tutorials, Guides & Insights

// الحصول على العناصر من DOM
const usernameInput = document.getElementById('username');
const submitBtn = document.getElementById('submitBtn');
const greetingParagraph = document.getElementById('greeting');

// إضافة حدث "click" للزر
submitBtn.addEventListener('click', function() {
    const username = usernameInput.value;

    // التحقق من أن المستخدم أدخل اسمه
    if (username.trim() !== "") {
        greetingParagraph.textContent = `مرحبًا، ${username}! شكرًا لاستخدام تطبيقي.`;
    } else {
        greetingParagraph.textContent = "يرجى إدخال اسمك.";
    }
});

• نبدأ بالحصول على مراجع للعناصر HTML مثل حقل الإدخال والزر والفقرة التي ستظهر رسالة الترحيب.
• نستخدم addEventListener لإضافة حدث "click" على الزر، حيث عندما يضغط المستخدم على الزر، سيتم عرض رسالة ترحيبية بناءً على الاسم الذي أدخله.
• إذا لم يتم إدخال اسم، سيعرض التطبيق رسالة تطلب من المستخدم إدخال اسمه.