First DOM Project

umarsayed12 · May 6, 2024 · 8499f89 · 8499f89
1 parent 97236ad
commit 8499f89
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/DOM_projects/color_picker.css b/DOM_projects/color_picker.css
@@ -0,0 +1,31 @@
+body{
+    height: 100vh;
+    width: 100vw;
+}
+
+.container{
+    height: 100%;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.btn{
+    height: 100px;
+    width:100px;
+    border: 1px solid black
+}
+
+#violet{
+    background-color: violet;
+}
+#yellow{
+    background-color: yellow;
+}
+#aqua{
+    background-color: aqua;
+}
+#grey{
+    background-color: grey;
+}
diff --git a/DOM_projects/color_picker.html b/DOM_projects/color_picker.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Pick</title>
+    <link rel="stylesheet" href="color_picker.css">
+</head>
+<body>
+    <div class="container">
+        <button class="btn" id="violet"></button>
+        <button class="btn" id="yellow"></button>
+        <button class="btn" id="aqua"></button>
+        <button class="btn" id="grey"></button>
+    </div>
+    <script src="color_picker.js"></script>
+</body>
+</html>
diff --git a/DOM_projects/color_picker.js b/DOM_projects/color_picker.js
@@ -0,0 +1,10 @@
+const buttons = document.querySelectorAll('.btn');
+const body = document.querySelector('body');
+
+buttons.forEach((button) => {
+    button.addEventListener('mouseover',(e) => {
+        body.style.backgroundColor = e.target.id;
+        button.style.height = "150px";
+        button.style.width = "150px";
+    });
+});