From a436ddcb3234a58e8596dd6c12a8a99c5f23afaa Mon Sep 17 00:00:00 2001 From: winlogon Date: Mon, 4 Nov 2024 09:29:51 +0100 Subject: [PATCH 1/3] feat(html): simplify HTML structure Remove unnecessary HTML elements and attributes, and extract styles to external stylesheet. --- index.html | 83 ++++++++---------------------------------------------- 1 file changed, 11 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index 6388daa..d020e1b 100644 --- a/index.html +++ b/index.html @@ -1,82 +1,21 @@ + - randomcolor - + + - -
-
- -
-
- -
-
- + +
+ + + +
- + + \ No newline at end of file From 44af23fa4f00818660325221141223c4ff26b0ca Mon Sep 17 00:00:00 2001 From: winlogon Date: Mon, 4 Nov 2024 09:30:21 +0100 Subject: [PATCH 2/3] refactor(js): Extract js code to external file Move JavaScript code to external file `color.js` for better organization and reusability. --- color.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 color.js diff --git a/color.js b/color.js new file mode 100644 index 0000000..db36e31 --- /dev/null +++ b/color.js @@ -0,0 +1,33 @@ +let letters = "0123456789ABCDEF"; +let color = '#'; +for (let i = 0; i < 6; i++) { + color += letters[(Math.floor(Math.random() * 16))]; +} + +let favicon = document.getElementById("favicon"); +let copy = document.getElementById("color"); +let text = document.querySelector("#show-text"); +let urlcolor = "https://www.colorhexa.com/" + color.slice(1) + ".png"; + +function copyLabelText() { + let labelText = document.getElementById("color").innerText; + navigator.clipboard.writeText(labelText) +}; + +copy.addEventListener("click", function () { + text.classList.remove("hidden"); + setTimeout(function () { + text.style.opacity = 0; + }, 1000); + text.style.opacity = 100; +}); + +text.addEventListener("transitionend", function () { + text.classList.add("hidden"); + text.style.opacity = 100; +}); + +document.body.style.background = color; +document.querySelector("label").textContent = color; +document.querySelector("title").textContent = color; +favicon.setAttribute("href", urlcolor); From 1eee69f45b967fc74552e6f71d687917dbb129b1 Mon Sep 17 00:00:00 2001 From: winlogon Date: Mon, 4 Nov 2024 09:32:11 +0100 Subject: [PATCH 3/3] feat(css): extract styles to external stylesheet Move inline styles to external stylesheet `style.css` for better maintainability and organization. --- style.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..b7ed36e --- /dev/null +++ b/style.css @@ -0,0 +1,26 @@ +label { + font-size: 3rem; +} + +p { + font-size: 1.25rem; +} + +main { + font-family: 'Consolas', monospace; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100dvh; + height: 100vh; +} + +.hidden { + display: none; +} + +#show-text { + color: #000; + transition: opacity 1s; +} \ No newline at end of file