hacktoberfest17 · GAURAVKR007 · Oct 16, 2022
diff --git a/Random-color-Generator/bing.mpeg b/Random-color-Generator/bing.mpeg
diff --git a/Random-color-Generator/index.html b/Random-color-Generator/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="shortcut icon" href="#">
+        <title>Random Color Generator</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+
+        <div id="Heading">
+            <strong> Random color generator.  </strong>
+        </div>
+
+        <div class="progress-bar" id="bar"></div>
+        <div class="container">
+        <div id="Color">
+            <p id="color-text">White</p>
+        </div>
+
+        <div class="button">
+            <button class="btn" id="button-1">click me to change color.</button>
+        </div>
+
+        <div class="button">
+            <button id="button-3" class="btn">Auto-Change</button>
+            <button id="button-2" class="btn">Reset.</button>
+        </div>
+        </div>
+        <script src="index.js"></script>
+    </body>
+
+</html>
diff --git a/Random-color-Generator/index.js 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
@@ -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
@@ -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;
+}