Random Color Generator

Amyx000 · web-flow · commit 3afc5835c137 · 2022-11-19T15:55:42.000+05:30
diff --git a/randomColorGenerator/index.css b/randomColorGenerator/index.css
@@ -0,0 +1,71 @@
+
+
+body{
+    margin:0;
+    padding: 0;
+    box-sizing: border-box;
+    text-align: center;
+    background: rgb(17,157,214);
+    background: radial-gradient(circle, rgba(17,157,214,1) 0%, rgba(148,187,233,1) 100%);
+}
+
+.main{
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: center;
+    margin: 0 20vw;
+    
+}
+
+.head{
+    font-size:3rem;
+    font-weight: bold;
+}
+
+.demo{
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    gap:50px
+}
+
+#rgb{
+    background-color: black;
+    color: white;
+    width: max-content;
+    padding: 10px;
+    margin: 0 auto;
+    border-radius: 4px;
+}
+
+#clrblock{
+    height: 200px;
+    width: 200px;
+    background-color: white;
+    border: 3px solid black;
+    border-radius: 10px;
+}
+
+.demo button{
+    width: max-content;
+    height: max-content;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+.demo button:active{
+    background-color: black;
+    color: white;
+}
+
+
+@media screen and (max-width:580px) {
+    .main{
+        margin: 0 10vw;
+    }
+    #clrblock{
+        width: 100px;
+        height: 100px;
+    }
+}
diff --git a/randomColorGenerator/index.html b/randomColorGenerator/index.html
@@ -0,0 +1,28 @@
+<!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="stylesheet" href="index.css">
+    <title>Random Color Generator</title>
+</head>
+
+<body>
+    <div class="main">
+        <div class="head">Random Color Generator</div>
+        <div>This app will let you generate a random color to any element you want on click of a button.
+            This can generate random rgb color upto 16,777,216 different possible colors.</div>
+        <div style="font-size: 40px; font-weight:bold">Demo</div>
+        <div id="rgb">rgb(255, 255, 255)</div>
+        <div class="demo">
+            <div id="clrblock"></div>
+            <button onclick="generateRandomColor()">Gererate Color</button>
+        </div>
+    </div>
+
+    <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/randomColorGenerator/index.js b/randomColorGenerator/index.js
@@ -0,0 +1,11 @@
+const colorBlock = document.querySelector("#clrblock") //Target the element you want to generate random color
+const rgbText= document.querySelector("#rgb")
+
+function generateRandomColor(){
+    const a = Math.round(Math.random()*255)
+    const b = Math.round(Math.random()*255)
+    const c = Math.round(Math.random()*255)
+
+    colorBlock.style.backgroundColor=`rgb(${a},${b},${c})`
+    rgbText.innerHTML=`rgb(${a}, ${b}, ${c})`
+}
