Initial commit

ManishaxKumari · Jun 14, 2024 · d0b3af4 · d0b3af4
commit d0b3af4
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/ColorChanger/index.html b/ColorChanger/index.html
@@ -0,0 +1,21 @@
+<!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="canva">
+        <h1>click for color change</h1>
+        <span class="button" id="white"></span>
+        <span class="button" id="yellow"></span>
+        <span class="button" id="red"></span>
+        <span class="button" id="green"></span>
+    </div>
+
+    <script src="logic.js"></script>
+</body>
+</html>
diff --git a/ColorChanger/logic.js b/ColorChanger/logic.js
@@ -0,0 +1,19 @@
+const buttons=document.querySelectorAll('.button');
+const body=document.querySelector('body');
+
+buttons.forEach(function(button){
+    button.addEventListener('click',function(e){
+        if (e.target.id === 'green') {
+            body.style.backgroundColor = e.target.id;
+          }
+          if (e.target.id === 'white') {
+            body.style.backgroundColor = e.target.id;
+          }
+          if (e.target.id === 'red') {
+            body.style.backgroundColor = e.target.id;
+          }
+          if (e.target.id === 'yellow') {
+            body.style.backgroundColor = e.target.id;
+          } 
+    });
+});
diff --git a/ColorChanger/style.css b/ColorChanger/style.css
@@ -0,0 +1,36 @@
+*{
+    padding:0px;
+    margin: 0px;
+
+}
+
+span{
+    display: block;
+}
+
+.canva{
+    margin: 100px;
+    width: 80%;
+    text-align: center;
+}
+.button {
+    width: 100px;
+    height: 100px;
+    border: solid black 2px;
+    display: inline-block;
+  }
+
+  #green {
+    background: green;
+  }
+
+  #white {
+    background: white;
+  }
+  #red {
+    background: red;
+  }
+  #yellow {
+    background: yellow;
+  }
+
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# beginner-javascript-project
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto