Add files via upload

adityalaxkar123 · Aug 24, 2024 · 58a8d66 · 58a8d66
1 parent 5975da6
commit 58a8d66
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 0 deletions.
diff --git a/project1/indexc.html b/project1/indexc.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>color Scheme Switcher</title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        nav{
+            background-color: rgb(245, 245, 245);
+            display: flex;
+            align-items: center;
+            height: 50px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        a{
+            text-decoration: none;
+            background-color:rgb(110, 193, 193);
+            width: 200px;
+            height: 30px;
+            text-align: center;
+            align-content: center;
+            color: black;
+            margin-left: 20px;
+            margin-right: 20px;
+            text-wrap:wrap; 
+        }
+        h1{
+            text-wrap:wrap ;
+            text-align: center;
+        }
+        h2{
+            text-wrap:wrap ;
+            text-align: center;
+        }
+        .button{
+            width: 200px;
+            height: 200px;
+            margin-left: 20px;
+            margin-right: 20px;
+            border: 2px solid black;
+            cursor: pointer;
+        }
+        .button:hover{
+            width: 200px;
+            height: 200px;
+            margin-left: 20px;
+            margin-right: 20px;
+            border: 2px solid black;
+            cursor: pointer;
+        }
+        .class{
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        #grey{
+            background-color:grey;
+        }
+        #white{
+            background-color: white;
+        }
+        #blue{
+            background-color: blue;
+        }
+        #yellow{
+            background-color: yellow;
+        }
+    </style>
+</head>
+<body>
+    <nav>
+        <a href="#home">Home</a>
+        <a href="mailto:[email protected]" target="_blank" aria-label="link">Gmail id</a>
+    </nav>
+
+    <div class="canvas">
+
+        <h1>Color Scheme Switcher</h1>
+        <div class="class">
+        <div class="button" id="grey"></div>
+        <div class="button" id="white"></div>
+        <div class="button" id="blue"></div>
+        <div class="button" id="yellow"></div>
+        </div>
+        <h2>Try on one of the above color <br>
+        <div>To change the background of this page</div>
+        </h2>
+    </div>
+    <script src="/project/project1/script.js"></script>
+
+</body>
+</html>
diff --git a/project1/script.js b/project1/script.js
@@ -0,0 +1,22 @@
+const buttons = document.querySelectorAll('.button');
+//console.log(buttons);
+const body = document.querySelector('body');
+buttons.forEach(btn => {
+    //console.log(btn);
+    btn.addEventListener('click',function(e){
+        console.log(e);
+        console.log(e.target);// to target particular element using given event
+        if (e.target.id === 'grey') {
+            body.style.backgroundColor = 'grey';
+        }
+        else if (e.target.id === 'white') {
+            body.style.backgroundColor = 'white';
+        }
+        else if (e.target.id === 'blue') {
+            body.style.backgroundColor = 'blue';
+        }
+        else if (e.target.id) {
+            body.style.backgroundColor = 'yellow';
+        }
+    })
+});