first js project

AryanMittal11 · Jul 21, 2024 · 14a4bff · 14a4bff
commit 14a4bff
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git a/ColorChanger/index.html b/ColorChanger/index.html
@@ -0,0 +1,24 @@
+<!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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>JavaScript Background Color Switcher</title>
+  </head>
+  <body>
+    <div class="canvas">
+      <h1>Color Scheme Switcher</h1>
+      <span class="button" id="grey"></span>
+      <span class="button" id="white"></span>
+      <span class="button" id="blue"></span>
+      <span class="button" id="yellow"></span>
+      <h2>
+        Try clicking on one of the colors above
+        <span>to change the background color of this page!</span>
+      </h2>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/ColorChanger/script.js b/ColorChanger/script.js
@@ -0,0 +1,9 @@
+const body = document.querySelector("body")
+const button = document.querySelectorAll(".button")
+
+button.forEach(function(button){
+    button.addEventListener('click', function(e){
+        console.log(e.target.id);
+        body.style.backgroundColor = e.target.id
+    })
+})
diff --git a/ColorChanger/style.css b/ColorChanger/style.css
@@ -0,0 +1,34 @@
+html {
+    margin: 0;
+  }
+
+  span {
+    display: block;
+  }
+  .canvas {
+    margin: 100px auto 100px;
+    width: 80%;
+    text-align: center;
+  }
+
+  .button {
+    width: 100px;
+    height: 100px;
+    border: solid black 2px;
+    display: inline-block;
+  }
+
+  #grey {
+    background: grey;
+  }
+
+  #white {
+    background: white;
+  }
+  #blue {
+    background: blue;
+  }
+  #yellow {
+    background: yellow;
+  }
+