diff --git a/Random-color-Generator/bing.mpeg b/Random-color-Generator/bing.mpeg new file mode 100644 index 000000000..e2b57ea01 Binary files /dev/null and b/Random-color-Generator/bing.mpeg differ 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; +}