diff --git a/03 - Random Color Generator/index.html b/03 - Random Color Generator/index.html index 4a9de57a..ca45fa3f 100644 --- a/03 - Random Color Generator/index.html +++ b/03 - Random Color Generator/index.html @@ -1,33 +1,39 @@ - - - - + + + + Random Color Generator - - - - -

- Random Color Generator -

+ + + + +

Random Color Generator

- - -
-

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

+

+ < / > with ❤️ by + Swapnil Srivastava +
+ #30DaysOfJavaScript + +

+ - - \ 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..a7995117 100644 --- 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; + } +}