Background changer app

nlz18001 · Mar 24, 2024 · 1857cee · 1857cee
1 parent dc1d1ba
commit 1857cee
Showing 1 changed file with 56 additions and 0 deletions.
diff --git a/week-09/background-changer-app/index.html b/week-09/background-changer-app/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Background Changer App</title>
+</head>
+<style>
+    label {
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 15px;
+    }
+
+    header {
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    h2 {
+        font-size: 15px;
+    }
+</style>
+<body>
+    <header>
+        <h1>Background Changer App</h1>
+        <h2>Change the background color of this page using the palette below!</h2>
+    </header>
+    <div>
+        <label for="color-picker">Color:</label>
+        <input type="color" value="#ff0000" id="color-picker">
+    </div>
+<script>
+    const colorPicker = document.getElementById("color-picker");
+
+    colorPicker.addEventListener("input", function(event) {
+        changeBackgroundColor(event.target.value);
+    });
+
+    colorPicker.addEventListener("change", function(event) {
+        changeBackgroundColor(event.target.value);
+    });
+
+    function changeBackgroundColor(color) {
+        document.body.style.backgroundColor = color;
+        localStorage.setItem("new-background-color", color)
+    }
+
+    window.addEventListener("load", function(){
+        const newBackgroundColor = localStorage.getItem("new-background-color");
+        if (newBackgroundColor) {
+            changeBackgroundColor(newBackgroundColor);
+            document.getElementById("color-picker").value = newBackgroundColor;
+        }
+    })
+</script>
+</body>
+</html>