تطبيق عملي: توليد ألوان عشوائية وتغيير خلفية الصفحة

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.


تطبيق عملي: توليد ألوان عشوائية وتغيير خلفية الصفحة

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

الخطوة 1: إنشاء ملف HTML

ابدأ بإنشاء ملف HTML جديد (مثلاً، index.html) وأضف الهيكل الأساسي التالي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تغيير لون الخلفية العشوائي</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            transition: background-color 0.5s ease; /* لإضافة تأثير انتقال ناعم */
        }
        button {
            padding: 15px 30px;
            font-size: 1.2em;
            cursor: pointer;
            border: none;
            border-radius: 8px;
            background-color: #3498db;
            color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <button id="changeColorBtn">غيّر لون الخلفية</button>

    <script>
        // هنا سنضيف كود JavaScript الخاص بنا
    </script>
</body>
</html>

الخطوة 2: إضافة دالة توليد الألوان

داخل وسم <script> في ملف HTML، أضف دالة generateRandomHexColor التي تعلمناها:

function generateRandomHexColor() {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  return `#${randomColor.padStart(6, '0')}`;
}

الخطوة 3: تطبيق اللون على خلفية الصفحة

الآن، سنقوم باستخدام الدالة لتغيير لون خلفية العنصر <body>. سنضيف أيضاً زراراً يسمح للمستخدم بتغيير اللون عند النقر عليه.

أضف الكود التالي أسفل دالة generateRandomHexColor داخل وسم <script>:

const changeColorBtn = document.getElementById('changeColorBtn');

function applyRandomBackgroundColor() {
    const newColor = generateRandomHexColor();
    document.body.style.backgroundColor = newColor;
    console.log("تم تغيير لون الخلفية إلى:", newColor);
}

// تطبيق لون عشوائي عند تحميل الصفحة لأول مرة
applyRandomBackgroundColor();

// تطبيق لون عشوائي عند النقر على الزر
changeColorBtn.addEventListener('click', applyRandomBackgroundColor);

الكود الكامل (index.html):

هذا هو الكود الكامل الذي يمكنك نسخه ولصقه في ملف index.html الخاص بك:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تغيير لون الخلفية العشوائي</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            transition: background-color 0.5s ease; /* لإضافة تأثير انتقال ناعم */
        }
        button {
            padding: 15px 30px;
            font-size: 1.2em;
            cursor: pointer;
            border: none;
            border-radius: 8px;
            background-color: #3498db;
            color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <button id="changeColorBtn">غيّر لون الخلفية</button>

    <script>
        function generateRandomHexColor() {
          const randomColor = Math.floor(Math.random() * 16777215).toString(16);
          return `#${randomColor.padStart(6, '0')}`;
        }

        const changeColorBtn = document.getElementById('changeColorBtn');

        function applyRandomBackgroundColor() {
            const newColor = generateRandomHexColor();
            document.body.style.backgroundColor = newColor;
            console.log("تم تغيير لون الخلفية إلى:", newColor);
        }

        // تطبيق لون عشوائي عند تحميل الصفحة لأول مرة
        applyRandomBackgroundColor();

        // تطبيق لون عشوائي عند النقر على الزر
        changeColorBtn.addEventListener('click', applyRandomBackgroundColor);
    </script>
</body>
</html>

كيفية التشغيل:

احفظ الملف باسم index.html وافتحه في متصفح الويب الخاص بك. ستلاحظ أن لون الخلفية يتغير تلقائياً عند تحميل الصفحة، ويمكنك النقر على الزر لتغيير اللون مرة أخرى. يمكنك أيضاً فتح وحدة تحكم المطور (Console) (عادةً F12) لرؤية الألوان التي يتم توليدها.

خاتمة:

لقد قمت بنجاح بتطبيق دالة JavaScript لتوليد ألوان سداسية عشرية عشوائية وتغيير خلفية صفحة الويب ديناميكياً. هذه المهارة أساسية لإنشاء تجارب مستخدم تفاعلية وجذابة.