From baceb0632fd4978167584505c3e3e47fc0b2348a Mon Sep 17 00:00:00 2001 From: amit_077 Date: Tue, 12 Sep 2023 02:43:38 +0530 Subject: [PATCH] FIX #89 Added Random Color Generator Project --- .../Random_Color_generator/css/styles.css | 43 +++++++++++++++++++ projects/Random_Color_generator/index.html | 17 ++++++++ projects/Random_Color_generator/index.js | 10 +++++ 3 files changed, 70 insertions(+) create mode 100644 projects/Random_Color_generator/css/styles.css create mode 100644 projects/Random_Color_generator/index.html create mode 100644 projects/Random_Color_generator/index.js diff --git a/projects/Random_Color_generator/css/styles.css b/projects/Random_Color_generator/css/styles.css new file mode 100644 index 00000000..23cedef8 --- /dev/null +++ b/projects/Random_Color_generator/css/styles.css @@ -0,0 +1,43 @@ +* { + margin: 0; + padding: 0; +} + +html { + font-size: 16px; +} + +.mainDiv { + min-height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.4s; +} + +.randomBtn { + background-color: skyblue; + border: 0; + padding: 1rem 1.5rem 1rem 1.5rem; + font-size: 1.2rem; + border-radius: 1rem; + cursor: pointer; + transition: font-size 0.5s; +} + +.randomBtn:hover { + font-size: 1.24rem; + background-color: rgb(137, 204, 231); +} + +@media screen and (max-width: 380px) { + html { + font-size: 10px; + } + + .randomBtn { + margin-left: 1rem; + margin-right: 1rem; + } +} diff --git a/projects/Random_Color_generator/index.html b/projects/Random_Color_generator/index.html new file mode 100644 index 00000000..5a79b766 --- /dev/null +++ b/projects/Random_Color_generator/index.html @@ -0,0 +1,17 @@ + + + + + + Document + + + +
+ +
+ + + diff --git a/projects/Random_Color_generator/index.js b/projects/Random_Color_generator/index.js new file mode 100644 index 00000000..8f16d8aa --- /dev/null +++ b/projects/Random_Color_generator/index.js @@ -0,0 +1,10 @@ +function generateColor() { + let x = Math.random() * 255; + let y = Math.random() * 255; + let z = Math.random() * 255; + let o = Math.random(); + + document.getElementsByClassName( + "mainDiv" + )[0].style.backgroundColor = `rgba(${x}, ${y}, ${z}, ${o})`; +}