مقدمة

مرحبًا بكم مجددًا! بعد أن تعرفتم على أساسيات HTML و CSS و JavaScript، حان الوقت لتطبيق ما تعلمتم من خلال مجموعة من التمارين العملية التفاعلية. هذه التمارين ستساعدكم على تثبيت معرفتكم وتطوير مهاراتكم كمطورين ويب. تذكروا دائمًا، جربوا حل التمارين بأنفسكم قبل رؤية الإجابات!

تمرين 1: إنشاء قائمة مهام تفاعلية

المطلوب
  1. أنشئ صفحة HTML تحتوي على نموذج لإضافة مهام جديدة.
  2. عند إدخال مهمة جديدة والضغط على زر الإضافة، يجب إضافة المهمة إلى قائمة المهام.
  3. كل مهمة يجب أن تحتوي على زر لحذفها عند الانتهاء منها.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>قائمة المهام</title>
    <style>
        .task {
            display: flex;
            justify-content: space-between;
            background-color: #f9f9f9;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
        }
    </style>
    <script>
        function addTask() {
            var taskInput = document.getElementById('taskInput').value;
            if (taskInput === '') {
                alert('الرجاء إدخال مهمة');
                return;
            }
            var taskList = document.getElementById('taskList');
            var taskItem = document.createElement('div');
            taskItem.className = 'task';
            taskItem.innerHTML = taskInput + ' <button onclick="removeTask(this)">حذف</button>';
            taskList.appendChild(taskItem);
            document.getElementById('taskInput').value = '';
        }

        function removeTask(button) {
            var taskItem = button.parentElement;
            taskItem.remove();
        }
    </script>
</head>
<body>
    <h1>قائمة المهام</h1>
    <input type="text" id="taskInput" placeholder="أدخل مهمة جديدة">
    <button onclick="addTask()">إضافة مهمة</button>
    <div id="taskList"></div>
</body>
</html>

تمرين 2: إنشاء معرض صور تفاعلي

المطلوب
  1. أنشئ صفحة HTML تحتوي على مجموعة من الصور المصغرة.
  2. عند النقر على أي صورة مصغرة، يجب عرض الصورة بالحجم الكامل في منطقة مخصصة.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>معرض الصور</title>
    <style>
        .thumbnail {
            width: 100px;
            height: 100px;
            margin: 10px;
            cursor: pointer;
            border: 1px solid #ddd;
        }
        #fullImage {
            width: 500px;
            height: 500px;
            margin-top: 20px;
            border: 1px solid #ddd;
        }
    </style>
    <script>
        function showImage(src) {
            var fullImage = document.getElementById('fullImage');
            fullImage.src = src;
        }
    </script>
</head>
<body>
    <h1>معرض الصور</h1>
    <img class="thumbnail" src="thumb1.jpg" onclick="showImage('image1.jpg')" alt="صورة 1">
    <img class="thumbnail" src="thumb2.jpg" onclick="showImage('image2.jpg')" alt="صورة 2">
    <img class="thumbnail" src="thumb3.jpg" onclick="showImage('image3.jpg')" alt="صورة 3">
    <img id="fullImage" src="" alt="عرض الصورة هنا">
</body>
</html>

تمرين 3: إنشاء آلة حاسبة بسيطة

المطلوب
  1. أنشئ صفحة HTML تحتوي على واجهة آلة حاسبة بسيطة مع أزرار للأرقام والعمليات الحسابية الأساسية (الجمع، الطرح، الضرب، القسمة).
  2. عند الضغط على الأزرار، يجب عرض الأرقام والعمليات في شاشة الآلة الحاسبة.
  3. عند الضغط على زر “=”، يجب عرض النتيجة في الشاشة.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>آلة حاسبة بسيطة</title>
    <style>
        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
            max-width: 200px;
            margin: 0 auto;
        }
        .calculator input, .calculator button {
            padding: 20px;
            font-size: 1.2em;
            text-align: center;
        }
        #result {
            grid-column: span 4;
            height: 50px;
            text-align: right;
        }
    </style>
    <script>
        function appendValue(value) {
            document.getElementById('result').value += value;
        }

        function calculate() {
            var result = document.getElementById('result').value;
            document.getElementById('result').value = eval(result);
        }

        function clearResult() {
            document.getElementById('result').value = '';
        }
    </script>
</head>
<body>
    <h1>آلة حاسبة بسيطة</h1>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <button onclick="clearResult()">C</button>
        <button onclick="appendValue('/')">/</button>
        <button onclick="appendValue('*')">*</button>
        <button onclick="appendValue('-')">-</button>
        <button onclick="appendValue('7')">7</button>
        <button onclick="appendValue('8')">8</button>
        <button onclick="appendValue('9')">9</button>
        <button onclick="appendValue('+')">+</button>
        <button onclick="appendValue('4')">4</button>
        <button onclick="appendValue('5')">5</button>
        <button onclick="appendValue('6')">6</button>
        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>
        <button onclick="appendValue('0')">0</button>
        <button onclick="appendValue('.')">.</button>
        <button onclick="calculate()">=</button>
    </div>
</body>
</html>

تمرين 4: إنشاء نموذج تسجيل دخول تفاعلي

المطلوب
  1. أنشئ صفحة HTML تحتوي على نموذج تسجيل دخول يتضمن حقولًا لإدخال اسم المستخدم وكلمة المرور.
  2. عند الضغط على زر “تسجيل الدخول”، يجب التحقق من صحة البيانات.
  3. إذا كانت البيانات صحيحة، اعرض رسالة ترحيبية؛ إذا كانت خاطئة، اعرض رسالة خطأ.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>نموذج تسجيل دخول</title>
    <style>
        .login-form {
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
        }
        .login-form input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
        }
        .login-form button {
            padding: 10px;
            width: 100%;
        }
        .message {
            text-align: center;
            margin-top: 20px;
        }
    </style>
    <script>
        function login() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var message = document.getElementById('message');

            if (username === 'admin' && password === '1234') {
                message.innerHTML = 'مرحبًا، ' + username + '!';
                message.style.color = 'green';
            } else {
                message.innerHTML = 'اسم المستخدم أو كلمة المرور غير صحيحة';
                message.style.color = 'red';
            }
        }
    </script>
</head>
<body>
    <h1>نموذج تسجيل دخول</h1>
    <div class="login-form">
        <input type="text" id="username" placeholder="اسم المستخدم">
        <input type="password" id="password" placeholder="كلمة المرور">
        <button onclick="login()">تسجيل الدخول</button>
        <div id="message" class="message"></div>
    </div>
</body>
</html>

تمرين 5: إنشاء نافذة منبثقة (Modal) تفاعلية

المطلوب
  1. أنشئ صفحة HTML تحتوي على زر لفتح نافذة منبثقة.
  2. عند الضغط على الزر، يجب عرض النافذة المنبثقة.
  3. النافذة المنبثقة يجب أن تحتوي على زر لإغلاقها.
الحل

جرب حل التمرين بنفسك أولاً!
إظهار الحل

<!DOCTYPE html>
<html>
<head>
    <title>نافذة منبثقة</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }
        .modal-content button {
            margin-top: 20px;
        }
    </style>
    <script>
        function openModal() {
            document.getElementById('myModal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('myModal').style.display = 'none';
        }
    </script>
</head>
<body>
    <h1>نافذة منبثقة</h1>
    <button onclick="openModal()">افتح النافذة</button>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <p>هذه نافذة منبثقة</p>
            <button onclick="closeModal()">إغلاق</button>
        </div>
    </div>
</body>
</html>

خاتمة

تهانينا! لقد أكملت مجموعة من التمارين العملية التي تساعدك على تعزيز معرفتك ومهاراتك في HTML و CSS و JavaScript. تذكر دائمًا أن الممارسة هي المفتاح لتحسين مهاراتك. استمر في تجربة كتابة الأكواد وتطبيق ما تعلمته في مشاريعك الخاصة. نتمنى لك التوفيق في رحلتك البرمجية!

كُتب بواسطة

Akhmad Abdulrahman

مدون ومصمم مواقع الانترنت لتقديم افضل الخدمات مجانا ولإثراء المحتوى العربي