الفصل الثاني

الفصل الأول
العقلية والاهداف

الفصل الثاني
الانترنت وHTML وCSS

الفصل الثالث
جافاسكربت

الفصل الرابع
تجهيز برنامجك الأول

الفصل الخامس
استضافة البرنامج

الفصل السادس
ربط برامج خارجية (1)

موارد الفصل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Color Changer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      background-color: #007bff;
      color: white;
      transition: background-color 0.3s ease;
    }
    button:hover {
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <h1>Change its Color</h1>
  <button id="colorButton">Click Me!</button>

  <script>
    const button = document.getElementById('colorButton');
    const colors = ['#007bff', '#28a745', '#ffc107', '#dc3545', '#6f42c1'];

    button.addEventListener('click', () => {
      const randomColor = colors[Math.floor(Math.random() * colors.length)];
      button.style.backgroundColor = randomColor;
    });
  </script>
</body>
</html>