Merge pull request #889 from Dimple-Choudhary/main

color-pop
Ayush7614 · Oct 22, 2022 · 0d07866 · 0d07866
2 parents 4bf2b78 + 29f0925
commit 0d07866
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/color-pop/index.html b/color-pop/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" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>color Pop</title>  
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="color-hover">
+      <div class="color red"></div>
+      <div class="color cyan"></div>
+      <div class="color violet"></div>
+      <div class="color orange"></div>
+      <div class="color pink"></div>
+    </div>
+    <div class="center"></div>
+    <script src="scripts.js"></script>
+  </body>
+</html>
diff --git a/color-pop/scripts.js b/color-pop/scripts.js
@@ -0,0 +1,50 @@
+const red = document.querySelector(".red");
+const cyan = document.querySelector(".cyan");
+const violet= document.querySelector(".violet");
+const orange = document.querySelector(".orange");
+const pink= document.querySelector(".pink");
+
+const center = document.querySelector(".center");
+
+
+
+// console.log(window.getComputedStyle(red).background);
+
+const getBGColor=(selectedElements) => {
+    return window.getComputedStyle(selectedElements).backgroundColor;
+
+}
+
+ var color =getBGColor(orange);
+
+
+ orange.addEventListener("click" ,() => {
+    center.style.background = organeELementColor; 
+ });
+
+ const colorPoper = (element, color) =>{
+   element.addEventListener("mouseenter" ,() => {
+        center.style.background = color; 
+     });
+ }
+
+
+  colorPoper(red, getBGColor(red));
+  colorPoper(cyan, getBGColor(cyan));
+  colorPoper(violet, getBGColor(violet));
+  colorPoper(orange, getBGColor(orange));
+  colorPoper(pink, getBGColor(pink));
+  colorPoper(red, getBGColor(red));
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/color-pop/style.css b/color-pop/style.css
@@ -0,0 +1,62 @@
+body {
+  background: rgb(66, 66, 66);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.red {
+  background: #e44236;
+  margin-right: 5px;
+}
+.cyan {
+  background: #25ccf7;
+  margin-right: 5px;
+}
+.violet {
+  background: #8b78e6;
+  margin-right: 5px;
+}
+.orange {
+  background: #ea7773;
+  margin-right: 5px;
+}
+.pink {
+  background: #bb2cd9;
+}
+
+.center {
+  min-width: 400px;
+  height: 400px;
+  background: rgb(66, 66, 66);
+  border-radius: 100%;
+  transition: 0.5s ease-in-out;
+}
+.color-hover {
+  position: absolute;
+  top: 10%;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+}
+.text {
+  padding: 10px;
+  color: #ffffff;
+}
+.color {
+  width: 120px;
+  height: 30px;
+  border-radius: 5%;
+  margin-bottom: 30px;
+}
+.color:hover {
+  cursor: pointer;
+}
+.color:last-child {
+  margin-bottom: 0;
+}