Color Changer

AritraC1 · AritraC1 · commit db764f7c769d · 2025-05-24T00:42:19.000+05:30
diff --git a/Projects/01-Color-Changer/index.html b/Projects/01-Color-Changer/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">
+    <title>Color Changer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="canvas">
+        <div class="heading">
+            <h1>Project 1: Color Changer</h1>
+            <h3>Try clicking on one of the colors below to change the background color of this page!</h3>
+        </div>
+        
+        <span class="btn" id="grey"></span>
+        <span class="btn" id="white"></span>
+        <span class="btn" id="blue"></span>
+        <span class="btn" id="yellow"></span>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/01-Color-Changer/script.js b/Projects/01-Color-Changer/script.js
@@ -0,0 +1,33 @@
+// Select Color and canvas
+const buttons = document.querySelectorAll('.btn');
+const canvas = document.querySelector('.canvas');
+
+buttons.forEach((button) => {
+    console.log(button);
+    button.addEventListener('click', (e) => {
+
+        const validColor = ['grey', 'white', 'blue', 'yellow'];
+        const color = e.target.id;
+
+        if(validColor.includes(color)){
+            canvas.style.backgroundColor = color
+        }
+
+
+        // if (e.target.id === 'grey') {
+        //     canvas.style.backgroundColor = e.target.id;
+        // }
+        // else if (e.target.id === 'white') {
+        //     canvas.style.backgroundColor = e.target.id;
+        // }
+        // else if (e.target.id === 'blue') {
+        //     canvas.style.backgroundColor = e.target.id;
+        // }
+        // else if (e.target.id === 'yellow') {
+        //     canvas.style.backgroundColor = e.target.id;
+        // } 
+    });
+})
+
+
+// Apply color to canvas
diff --git a/Projects/01-Color-Changer/style.css b/Projects/01-Color-Changer/style.css
@@ -0,0 +1,42 @@
+* {
+    font-family: monospace;
+    margin: 0;
+}
+
+span {
+    display: block;
+}
+
+.canvas {
+    text-align: center;
+    height: 100vh;
+}
+
+.heading h1, .heading h3 {
+    margin-bottom: 20px;
+}
+
+.btn {
+    width: 100px;
+    height: 100px;
+    border: solid black 2px;
+    display: inline-block;
+    cursor: pointer;
+}
+
+#grey {
+  background: grey;
+}
+
+#white {
+  background: white;
+}
+
+#blue {
+  background: blue;
+}
+
+#yellow {
+  background: yellow;
+}
+
