background color updates with the color picker

kmr18006 · Mar 21, 2024 · 0f67e3f · 0f67e3f
1 parent 9c3d9b0
commit 0f67e3f
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/week-09/backgroundchange/index.html b/week-09/backgroundchange/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html class="no-js" lang="eng">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Web Contact Form</title>
+  <link rel="stylesheet" href="css/style.css">
+  <meta name="description" content="Contact form website">
+</head>
+
+<body>
+    <label for="color-picker">Background Color:</label><br><br>
+    <input type="color" value="#0000ff" id="color-picker" />
+
+    <script>
+        let colorPicker;
+        const defaultColor = "#0000ff";
+
+        window.addEventListener("load", startup, false);
+
+        function startup() {
+          colorPicker = document.querySelector("#color-picker");
+          colorPicker.value = defaultColor;
+          colorPicker.addEventListener("input", updateAll, false);
+          colorPicker.addEventListener("change", updateAll, false);
+          colorPicker.select();
+        }
+
+        function updateAll(event) {
+          document.querySelectorAll("body").forEach((background) => {
+            background.style.backgroundColor = event.target.value;
+          });
+        }
+    </script>
+</body>
+</html>