Merge pull request #37 from zaidm124/master

Added functionality of copying the hashcode to clipboard on clicking the box (03-Random Color Generator)
swapnilsparsh · Oct 4, 2021 · ef44053 · ef44053
2 parents 76b5af3 + 686b44b
commit ef44053
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 39 deletions.
diff --git a/03 - Random Color Generator/index.html b/03 - Random Color Generator/index.html
@@ -1,33 +1,39 @@
 <!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">
+  <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" />
     <title>Random Color Generator</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="shortcut icon" href="assets/wheel.png" type="image/x-icon">
-</head>
-<body>
-    <h2 class="heading">
-        Random Color Generator
-    </h2>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" href="assets/wheel.png" type="image/x-icon" />
+  </head>
+  <body>
+    <h2 class="heading">Random Color Generator</h2>
 
-    <button class="btn" onclick="addColor();" >
-        Refresh
-    </button>
-
-    <section class="container"></section>
-    <br><br>
+    <div class="body">
+      <div class="item">
+        <button class="btn" onclick="addColor();">Refresh</button>
+        <div class="copy">Click on a box to copy the hashcode to clipboard</div>
+      </div>
+      <div class="cont">
+        <section class="container"></section>
+      </div>
+    </div>
+    <br /><br />
     <footer>
-        <p>&#x3c; &#47; &#x3e; with ❤️ by 
-          <a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
-          <br> 
-          <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
-          </a>
-        </p>
-      </footer>
+      <p>
+        &#x3c; &#47; &#x3e; with ❤️ by
+        <a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
+        <br />
+        <a
+          href="https://github.com/swapnilsparsh/30DaysOfJavaScript"
+          target="_blank"
+          >#30DaysOfJavaScript
+        </a>
+      </p>
+    </footer>
 
     <script src="main.js"></script>
-</body>
-</html>
+  </body>
+</html>
diff --git a/03 - Random Color Generator/main.js b/03 - Random Color Generator/main.js
@@ -1,32 +1,38 @@
 window.onload = function () {
     addColor();
-  };
-  
+};
+
 for (let i = 1; i <= 9; i++) {
     const box = document.createElement('div');
     box.classList.add('box');
     document.querySelector('.container').appendChild(box);
+    box.style.cursor = 'pointer';
+    box.addEventListener('click', () => {
+        console.log(box.innerHTML);
+        navigator.clipboard.writeText(box.innerHTML);
+    });
 }
 
 const btn = document.querySelector('.btn');
 const randomColorBlock = document.querySelectorAll('.box');
 
-function RandomHexColorCode(){
-    var chars = "0123456789abcdef";
+function RandomHexColorCode () {
+    var chars = '0123456789abcdef';
     var colorLength = 6;
-    var color = "";
+    var color = '';
 
-    for (var i=0 ; i<colorLength ; i++){
+    for (var i = 0; i < colorLength; i++) {
         var randomColor = Math.floor(Math.random() * chars.length);
-        color += chars.substring(randomColor, randomColor+1);
+        color += chars.substring(randomColor, randomColor + 1);
     }
-    return "#"+color;
+    return '#' + color;
 }
 
-function addColor(){
-    randomColorBlock.forEach(e =>{
+function addColor () {
+    randomColorBlock.forEach(e => {
         var newColor = RandomHexColorCode();
         e.style.backgroundColor = newColor;
-        e.innerHTML= newColor;
-    })
-}
+        e.innerHTML = newColor;
+    });
+}
+
diff --git a/03 - Random Color Generator/style.css b/03 - Random Color Generator/style.css
@@ -71,8 +71,62 @@ footer a:visited {
   color: inherit;
 }
 
+.item {
+  display: flex;
+  flex-direction: row;
+}
+
+.copy {
+  color: white;
+  padding: 15px 60px;
+  font-size: 1.5rem;
+  margin: 20px auto;
+  background: #333;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+}
+
 @media (max-width: 500px) {
   .box {
     font-size: 0.8rem;
   }
 }
+
+@media (max-width: 450px) {
+  .item {
+    flex-direction: column;
+  }
+  .btn {
+    width: 100%;
+  }
+  .copy {
+    margin-left: 0px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 450px) {
+  .copy {
+    width: 100%;
+  }
+}
+
+@media (max-width: 840px) {
+  .copy {
+    margin-left: 10px;
+  }
+}
+
+@media (max-width: 300px) {
+  .copy {
+    padding: 5px;
+    width: fit-content;
+    text-align: center;
+  }
+  .btn {
+    padding: 5px;
+  }
+}