From 9e17b6aced7cffbddc51a83ccd0d0a0d75f9388e Mon Sep 17 00:00:00 2001 From: Dimple choudhary <96401557+Dimple-Choudhary@users.noreply.github.com> Date: Thu, 20 Oct 2022 07:34:02 +0530 Subject: [PATCH 1/7] Add files via upload --- color-pop/index.html | 21 +++++++++++++++ color-pop/scripts.js | 50 +++++++++++++++++++++++++++++++++++ color-pop/style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 color-pop/index.html create mode 100644 color-pop/scripts.js create mode 100644 color-pop/style.css diff --git a/color-pop/index.html b/color-pop/index.html new file mode 100644 index 00000000..59b8ec41 --- /dev/null +++ b/color-pop/index.html @@ -0,0 +1,21 @@ + + + + + + + color Pop + + + +
+
+
+
+
+
+
+
+ + + diff --git a/color-pop/scripts.js b/color-pop/scripts.js new file mode 100644 index 00000000..0551df47 --- /dev/null +++ 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)); + + + + + + + + + + + + + \ No newline at end of file diff --git a/color-pop/style.css b/color-pop/style.css new file mode 100644 index 00000000..0c8124fe --- /dev/null +++ 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; +} From d35297543a207a308f18d023a16ee02b4772d434 Mon Sep 17 00:00:00 2001 From: Dimple choudhary <96401557+Dimple-Choudhary@users.noreply.github.com> Date: Thu, 20 Oct 2022 07:37:45 +0530 Subject: [PATCH 2/7] Delete color-pop directory --- color-pop/index.html | 21 --------------- color-pop/scripts.js | 50 ----------------------------------- color-pop/style.css | 62 -------------------------------------------- 3 files changed, 133 deletions(-) delete mode 100644 color-pop/index.html delete mode 100644 color-pop/scripts.js delete mode 100644 color-pop/style.css diff --git a/color-pop/index.html b/color-pop/index.html deleted file mode 100644 index 59b8ec41..00000000 --- a/color-pop/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - color Pop - - - -
-
-
-
-
-
-
-
- - - diff --git a/color-pop/scripts.js b/color-pop/scripts.js deleted file mode 100644 index 0551df47..00000000 --- a/color-pop/scripts.js +++ /dev/null @@ -1,50 +0,0 @@ -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)); - - - - - - - - - - - - - \ No newline at end of file diff --git a/color-pop/style.css b/color-pop/style.css deleted file mode 100644 index 0c8124fe..00000000 --- a/color-pop/style.css +++ /dev/null @@ -1,62 +0,0 @@ -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; -} From 6c12c0893ea1390103d8e8363eda30ab79396b77 Mon Sep 17 00:00:00 2001 From: Dimple choudhary <96401557+Dimple-Choudhary@users.noreply.github.com> Date: Thu, 20 Oct 2022 07:41:30 +0530 Subject: [PATCH 3/7] Add files via upload --- color-pop/index.html | 21 +++++++++++++++ color-pop/scripts.js | 50 +++++++++++++++++++++++++++++++++++ color-pop/style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 color-pop/index.html create mode 100644 color-pop/scripts.js create mode 100644 color-pop/style.css diff --git a/color-pop/index.html b/color-pop/index.html new file mode 100644 index 00000000..59b8ec41 --- /dev/null +++ b/color-pop/index.html @@ -0,0 +1,21 @@ + + + + + + + color Pop + + + +
+
+
+
+
+
+
+
+ + + diff --git a/color-pop/scripts.js b/color-pop/scripts.js new file mode 100644 index 00000000..0551df47 --- /dev/null +++ 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)); + + + + + + + + + + + + + \ No newline at end of file diff --git a/color-pop/style.css b/color-pop/style.css new file mode 100644 index 00000000..0c8124fe --- /dev/null +++ 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; +} From f992b71f9953fa5b489e9e63c76f40b3e66c8ddd Mon Sep 17 00:00:00 2001 From: Dimple choudhary <96401557+Dimple-Choudhary@users.noreply.github.com> Date: Thu, 20 Oct 2022 07:45:34 +0530 Subject: [PATCH 4/7] Delete style.css --- color-pop/style.css | 62 --------------------------------------------- 1 file changed, 62 deletions(-) delete mode 100644 color-pop/style.css diff --git a/color-pop/style.css b/color-pop/style.css deleted file mode 100644 index 0c8124fe..00000000 --- a/color-pop/style.css +++ /dev/null @@ -1,62 +0,0 @@ -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; -} From 245f55229b3c2a8db905d93ff86595d1dae43a33 Mon Sep 17 00:00:00 2001 From: Dimple choudhary <96401557+Dimple-Choudhary@users.noreply.github.com> Date: Thu, 20 Oct 2022 07:55:34 +0530 Subject: [PATCH 5/7] Delete index.html --- color-pop/index.html | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 color-pop/index.html diff --git a/color-pop/index.html b/color-pop/index.html deleted file mode 100644 index 59b8ec41..00000000 --- a/color-pop/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - color Pop - - - -
-
-
-
-
-
-
-
- - - From 728aefffe55259d9d5a14843d0c83a66e94a49f2 Mon Sep 17 00:00:00 2001 From: Dimple choudhary <96401557+Dimple-Choudhary@users.noreply.github.com> Date: Thu, 20 Oct 2022 07:55:46 +0530 Subject: [PATCH 6/7] Delete scripts.js --- color-pop/scripts.js | 50 -------------------------------------------- 1 file changed, 50 deletions(-) delete mode 100644 color-pop/scripts.js diff --git a/color-pop/scripts.js b/color-pop/scripts.js deleted file mode 100644 index 0551df47..00000000 --- a/color-pop/scripts.js +++ /dev/null @@ -1,50 +0,0 @@ -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)); - - - - - - - - - - - - - \ No newline at end of file From 29f0925e0e5a8b584cee6b55ae5f8c5c0d4eea37 Mon Sep 17 00:00:00 2001 From: Dimple choudhary <96401557+Dimple-Choudhary@users.noreply.github.com> Date: Thu, 20 Oct 2022 07:59:33 +0530 Subject: [PATCH 7/7] Add files via upload --- color-pop/index.html | 21 +++++++++++++++ color-pop/scripts.js | 50 +++++++++++++++++++++++++++++++++++ color-pop/style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 color-pop/index.html create mode 100644 color-pop/scripts.js create mode 100644 color-pop/style.css diff --git a/color-pop/index.html b/color-pop/index.html new file mode 100644 index 00000000..59b8ec41 --- /dev/null +++ b/color-pop/index.html @@ -0,0 +1,21 @@ + + + + + + + color Pop + + + +
+
+
+
+
+
+
+
+ + + diff --git a/color-pop/scripts.js b/color-pop/scripts.js new file mode 100644 index 00000000..0551df47 --- /dev/null +++ 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)); + + + + + + + + + + + + + \ No newline at end of file diff --git a/color-pop/style.css b/color-pop/style.css new file mode 100644 index 00000000..0c8124fe --- /dev/null +++ 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; +}