From 509637805a94026c5cbe732caed7242035a4759b Mon Sep 17 00:00:00 2001 From: zaidm124 Date: Sun, 3 Oct 2021 14:01:51 +0530 Subject: [PATCH 1/2] Added functionality of copying the hashcode to clipboard on clicking the box. closes:https://github.com/swapnilsparsh/30DaysOfJavaScript/issues/35 --- 03 - Random Color Generator/index.html | 54 +++++++------ 03 - Random Color Generator/main.js | 32 +++++--- 03 - Random Color Generator/style.css | 106 ++++++++++++++----------- 3 files changed, 107 insertions(+), 85 deletions(-) diff --git a/03 - Random Color Generator/index.html b/03 - Random Color Generator/index.html index 4a9de57a..447e91d7 100644 --- a/03 - Random Color Generator/index.html +++ b/03 - Random Color Generator/index.html @@ -1,33 +1,35 @@ - + - - - - Random Color Generator - - + + + + Random Color Generator + + -

- Random Color Generator -

+

+ Random Color Generator +

- +
+ +
Click on a box to copy the hashcode to clipboard
+
+
+

+ -
-

- - - + - \ No newline at end of file + diff --git a/03 - Random Color Generator/main.js b/03 - Random Color Generator/main.js index 5e8b7e2f..90398d29 100644 --- 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{ +function addColor () { + randomColorBlock.forEach(e => { var newColor = RandomHexColorCode(); e.style.backgroundColor = newColor; - e.innerHTML= newColor; - }) -} \ No newline at end of file + e.innerHTML = newColor; + }); +} + diff --git a/03 - Random Color Generator/style.css b/03 - Random Color Generator/style.css index ee40ae7a..f8350498 100644 --- a/03 - Random Color Generator/style.css +++ b/03 - Random Color Generator/style.css @@ -1,78 +1,92 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: "sans"; - color: black; - background-color: #19172e; + font-family: "sans"; + color: black; + background-color: #19172e; } @font-face { - src: url("font/sans.ttf"); - font-family: "sans"; + src: url("font/sans.ttf"); + font-family: "sans"; } .heading { - color: white; - padding-top: 10px; - justify-content: center; - text-align: center; - font-size: 2rem; + color: white; + padding-top: 10px; + justify-content: center; + text-align: center; + font-size: 2rem; } .btn { - background: #333; - color: white; - padding: 15px 60px; - font-size: 1.5rem; - margin: 20px auto; - display: block; - cursor: pointer; - border-radius: 5px; - border: none; + background: #333; + color: white; + padding: 15px 60px; + font-size: 1.5rem; + margin: 20px auto; + display: block; + cursor: pointer; + border-radius: 5px; + border: none; } .btn:hover { - background-color: #1e8e3e; - color: white; + background-color: #1e8e3e; + color: white; } .container { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .box { - width: 33.3%; - height: 150px; - display: flex; - justify-content: center; - align-items: center; - background: #19172e; - border: 2px solid #19172e; - border-radius: 8px; - font-size: 1.5rem; + width: 33.3%; + height: 150px; + display: flex; + justify-content: center; + align-items: center; + background: #19172e; + border: 2px solid #19172e; + border-radius: 8px; + font-size: 1.5rem; } footer { - text-align: center; - color: white; - font-size: 1rem; - bottom: 0; - margin-bottom: 0; - padding: 5px; - line-height: 3vh; + text-align: center; + color: white; + font-size: 1rem; + bottom: 0; + margin-bottom: 0; + padding: 5px; + line-height: 3vh; } footer a:visited { - color: inherit; + color: inherit; +} + +.item { + display: flex; + flex-direction: row; +} + +.copy { + color: white; + padding: 15px 60px; + font-size: 1.5rem; + margin: 20px auto; + background: #333; + } @media (max-width: 500px) { - .box { - font-size: 0.8rem; - } + .box { + font-size: 0.8rem; + } } From 686b44bc75bac2cb38b5e887162de31bfe777233 Mon Sep 17 00:00:00 2001 From: zaidm124 Date: Mon, 4 Oct 2021 12:29:34 +0530 Subject: [PATCH 2/2] mobile responsiveness --- 03 - Random Color Generator/index.html | 66 +++++------ 03 - Random Color Generator/style.css | 146 ++++++++++++++++--------- 2 files changed, 128 insertions(+), 84 deletions(-) diff --git a/03 - Random Color Generator/index.html b/03 - Random Color Generator/index.html index 447e91d7..ca45fa3f 100644 --- a/03 - Random Color Generator/index.html +++ b/03 - Random Color Generator/index.html @@ -1,35 +1,39 @@ - - - - - - Random Color Generator - - - - -

- Random Color Generator -

+ + + + + + Random Color Generator + + + + +

Random Color Generator

-
- -
Click on a box to copy the hashcode to clipboard
-
-
-

- +
+
+ +
Click on a box to copy the hashcode to clipboard
+
+
+
+
+
+

+ - - + + diff --git a/03 - Random Color Generator/style.css b/03 - Random Color Generator/style.css index f8350498..a7995117 100644 --- a/03 - Random Color Generator/style.css +++ b/03 - Random Color Generator/style.css @@ -1,92 +1,132 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: "sans"; - color: black; - background-color: #19172e; + font-family: "sans"; + color: black; + background-color: #19172e; } @font-face { - src: url("font/sans.ttf"); - font-family: "sans"; + src: url("font/sans.ttf"); + font-family: "sans"; } .heading { - color: white; - padding-top: 10px; - justify-content: center; - text-align: center; - font-size: 2rem; + color: white; + padding-top: 10px; + justify-content: center; + text-align: center; + font-size: 2rem; } .btn { - background: #333; - color: white; - padding: 15px 60px; - font-size: 1.5rem; - margin: 20px auto; - display: block; - cursor: pointer; - border-radius: 5px; - border: none; + background: #333; + color: white; + padding: 15px 60px; + font-size: 1.5rem; + margin: 20px auto; + display: block; + cursor: pointer; + border-radius: 5px; + border: none; } .btn:hover { - background-color: #1e8e3e; - color: white; + background-color: #1e8e3e; + color: white; } .container { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .box { - width: 33.3%; - height: 150px; - display: flex; - justify-content: center; - align-items: center; - background: #19172e; - border: 2px solid #19172e; - border-radius: 8px; - font-size: 1.5rem; + width: 33.3%; + height: 150px; + display: flex; + justify-content: center; + align-items: center; + background: #19172e; + border: 2px solid #19172e; + border-radius: 8px; + font-size: 1.5rem; } footer { - text-align: center; - color: white; - font-size: 1rem; - bottom: 0; - margin-bottom: 0; - padding: 5px; - line-height: 3vh; + text-align: center; + color: white; + font-size: 1rem; + bottom: 0; + margin-bottom: 0; + padding: 5px; + line-height: 3vh; } footer a:visited { - color: inherit; + color: inherit; } .item { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .copy { - color: white; - padding: 15px 60px; - font-size: 1.5rem; - margin: 20px auto; - background: #333; + 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; - } + .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; + } }