From 2c3f77bdfc47662a9e31b1d841f63bbc2702a15b Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Thakur <84225690+GAURAVKR007@users.noreply.github.com> Date: Sun, 16 Oct 2022 18:40:58 +0530 Subject: [PATCH] Random Color Generator I made a Random Color Generator in Html,css,Js. Please Consider this and Merge. Thanks --- Random-color-Generator/bing.mpeg | Bin 0 -> 7682 bytes Random-color-Generator/index.html | 37 ++++++++++++++ Random-color-Generator/index.js | 55 ++++++++++++++++++++ Random-color-Generator/readme.md | 16 ++++++ Random-color-Generator/style.css | 82 ++++++++++++++++++++++++++++++ 5 files changed, 190 insertions(+) create mode 100644 Random-color-Generator/bing.mpeg create mode 100644 Random-color-Generator/index.html create mode 100644 Random-color-Generator/index.js create mode 100644 Random-color-Generator/readme.md create mode 100644 Random-color-Generator/style.css diff --git a/Random-color-Generator/bing.mpeg b/Random-color-Generator/bing.mpeg new file mode 100644 index 0000000000000000000000000000000000000000..e2b57ea01ed5de87e3666a67c25d3365419e5e06 GIT binary patch literal 7682 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 literal 0 HcmV?d00001 diff --git a/Random-color-Generator/index.html b/Random-color-Generator/index.html new file mode 100644 index 000000000..3a50a7798 --- /dev/null +++ b/Random-color-Generator/index.html @@ -0,0 +1,37 @@ + + + + + + + + + Random Color Generator + + + + + +
+ Random color generator. +
+ +
+
+
+

White

+
+ +
+ +
+ +
+ + +
+
+ + + + diff --git a/Random-color-Generator/index.js b/Random-color-Generator/index.js new file mode 100644 index 000000000..b4abb004f --- /dev/null +++ b/Random-color-Generator/index.js @@ -0,0 +1,55 @@ +let audioTurn = new Audio("bing.mpeg"); + +const heading = document.getElementById("Heading") +const bar = document.getElementById("bar") +const autoBtn = document.getElementById("button-3") +const changeBtn = document.getElementById("button-1") + +// changeBtn.addEventListener("click",colorChange()) + +var set = false; +var mytimer +document.getElementById("button-1").onclick = function () { + changeColor() + +} + +function changeColor() { + let r, g, b, appleColor; + r = Math.round(Math.random() * 256); + g = Math.round(Math.random() * 256); + b = Math.round(Math.random() * 256); + appleColor = 'rgb(' + r + ',' + g + ',' + b + ')'; + document.getElementById("Color").style.backgroundColor + = appleColor; + document.getElementById("color-text").innerHTML= + appleColor; + bar.style.backgroundColor = appleColor + audioTurn.play(); +} + +autoBtn.addEventListener("click",()=>{ + bar.classList.add('active'); + if(set===false){ + mytimer = setInterval(changeColor,7000); + set=true; + } + +}) + + +document.getElementById("button-2").onclick = +function(){ + audioTurn.play(); + let color="white"; + document.getElementById("Color").style.backgroundColor + =color; + document.getElementById("color-text").innerHTML= + "White"; + bar.style.backgroundColor = `white` + heading.style.color = `white` + bar.classList.remove('active') + clearInterval(mytimer) + set = false +} + diff --git a/Random-color-Generator/readme.md b/Random-color-Generator/readme.md new file mode 100644 index 000000000..7f216e3e4 --- /dev/null +++ b/Random-color-Generator/readme.md @@ -0,0 +1,16 @@ +This is a JS project. + +Do change it's background. + +Steps to make PR: + + i. Fork the repository. + ii. Make changes in code. + iii. Go to Pull requests. + iv. Click new Pull request. + v. Add title and description. + vi. Click create pull request. + + # Tutorial Links to follow:- + ### Git and Github + https://youtu.be/apGV9Kg7ics diff --git a/Random-color-Generator/style.css b/Random-color-Generator/style.css new file mode 100644 index 000000000..45723059a --- /dev/null +++ b/Random-color-Generator/style.css @@ -0,0 +1,82 @@ +body{ + background: rgb(131,58,180); + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); +} +#Heading{ + text-align: center; + font-size: 60px; + color: white; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} +.container{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 150px; +} + +.progress-bar.active { + background-color: #fff; + height: 4px; + width: 50%; + margin-top: 50px; + margin-left: 24%; + animation: grow 7s linear infinite; + transform-origin: left; +} + +@keyframes grow { + 0% { + transform: scaleX(0); + } +} + +#button-3 { + background-color: bisque; + margin-right: 25px; +} + +#Color{ + background-color: white; + height: 300px; + width: 300px; + margin: 10px auto; + padding-top: 20px; + border-radius: 1em; + box-shadow: 10px 10px 8px #181717; +} +#Color p{ + border-radius: 1em; + text-align: center; + font-size: 23px; + width: 190px; + background-color: white; + padding: 15px; + border: 1px solid black; + display: block; + margin: 30px auto; +} +.btn{ + margin-top: 20px ; + padding: 10px; + font-size: 22px; + background-color: rgb(230, 170, 215); + border-radius: 9px; + cursor: pointer; + transition: 0.3s; + box-shadow: 10px 10px 8px #181717; + +} +#button-2{ + background-color: bisque; +} +.button{ + text-align: center; + +} + +.btn:hover{ + background-color: yellow; + font-size: 25px; +}