Merge pull request #2 from Valik3201/color-switcher

Added color switcher

src/01-color-switcher.html

@@ -47,8 +47,10 @@
 
     <h1 class="title">Color Switcher</h1>
 
-    <button type="button" data-start>Start</button>
-    <button type="button" data-stop>Stop</button>
+    <div class="color-switcher-btn">
+      <button type="button" data-start>Start</button>
+      <button type="button" data-stop>Stop</button>
+    </div>
 
     <script src="js/01-color-switcher.js" type="module"></script>
   </body>

src/css/common.css

@@ -67,3 +67,34 @@ button {
 .back-button:hover {
   background-color: #ffe20d;
 }
+
+/* ---------- COLOR SWITCHER ---------- */
+
+.color-switcher-btn {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+button[data-start],
+button[data-stop] {
+  padding: 1rem 2rem;
+  background-color: rgba(265, 265, 265, 0.1);
+  color: #000;
+  font-weight: 700;
+  border-radius: 0.5rem;
+  border: 0.125rem solid #000;
+  font-size: 1rem;
+}
+
+button[data-start]:not([disabled]):hover,
+button[data-stop]:not([disabled]):hover {
+  background-color: rgba(265, 265, 265, 0.2);
+}
+
+button[data-start]:disabled,
+button[data-stop]:disabled {
+  color: rgba(0, 0, 0, 0.5);
+  border: 0.125rem solid rgba(0, 0, 0, 0.5);
+  cursor: not-allowed;
+}

src/js/01-color-switcher.js

@@ -1 +1,36 @@
+const startBtn = document.querySelector("button[data-start]");
+const stopBtn = document.querySelector("button[data-stop]");
+let timerId = null;
 
+startBtn.disabled = false;
+stopBtn.disabled = true;
+
+startBtn.addEventListener("click", () => {
+  toggleButtons();
+  colorSwitcher();
+
+  timerId = setInterval(() => {
+    colorSwitcher();
+  }, 1000);
+});
+
+stopBtn.addEventListener("click", () => {
+  toggleButtons();
+  clearInterval(timerId);
+});
+
+function colorSwitcher() {
+  const bgColor = getRandomHexColor();
+  document.body.style.backgroundColor = bgColor;
+}
+
+function toggleButtons() {
+  startBtn.disabled = !startBtn.disabled;
+  stopBtn.disabled = !stopBtn.disabled;
+}
+
+function getRandomHexColor() {
+  return `#${Math.floor(Math.random() * 16777215)
+    .toString(16)
+    .padStart(6, 0)}`;
+}