Add files via upload

Taniya23Y · Mar 27, 2024 · fa7e2b3 · fa7e2b3
1 parent 1c089f8
commit fa7e2b3
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 0 deletions.
diff --git a/36_Projects/11_ultimate_Color/index.html b/36_Projects/11_ultimate_Color/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Ultimate Background color changer</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body style="background-color: #212121; color: #fff">
+    <nav>
+      <a href="/" aria-current="page">Home</a>
+      <a target="_blank" href="https://www.youtube.com/@channel"
+        >Channel Name</a
+      >
+    </nav>
+
+    <h1>Start should change the Background color every second</h1>
+    <button id="start">Start</button>
+    <button id="stop">Stop</button>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/36_Projects/11_ultimate_Color/script.js b/36_Projects/11_ultimate_Color/script.js
@@ -0,0 +1,31 @@
+//generate a random color
+
+const randomColor = function () {
+    const hex = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+      color += hex[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  };
+
+  let intervalId;
+  const startChangingColor = function () {
+    if (!intervalId) {
+      intervalId = setInterval(changeBgColor, 1000);
+    }
+
+    function changeBgColor() {
+      document.body.style.backgroundColor = randomColor();
+    }
+  };
+  const stopChangingColor = function () {
+    clearInterval(intervalId);
+    intervalId = null;
+  };
+
+  document.querySelector('#start').addEventListener('click', startChangingColor);
+
+  document.querySelector('#stop').addEventListener('click', stopChangingColor);
+
+
diff --git a/36_Projects/11_ultimate_Color/style.css b/36_Projects/11_ultimate_Color/style.css
@@ -0,0 +1,61 @@
+* {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+    color: black;
+    background-color: white;
+  }
+
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    gap: 0.5rem;
+    border-bottom: solid 1px #aaa;
+    background-color: #eee;
+  }
+
+  nav a {
+    display: inline-block;
+    min-width: 9rem;
+    padding: 0.5rem;
+    border-radius: 0.2rem;
+    border: solid 1px rgb(22, 22, 22);
+    text-align: center;
+    text-decoration: none;
+    color: #1b1b1b;
+  }
+
+  nav a[aria-current='page'] {
+    color: #000;
+    background-color: #d4d4d4;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  h1 {
+    font-weight: bold;
+    font-size: 1.5rem;
+  }
+
+  .projects {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .project-link {
+    background-color: #fff;
+    padding: 10px 30px;
+    border-radius: 8px;
+    color: #212121;
+    text-decoration: none;
+    border: 2px solid #212121;
+    margin-top: 5px;
+  }