From e686ed2729f276d116efa822b893da0c7f0e443c Mon Sep 17 00:00:00 2001 From: supr1yo Date: Fri, 5 Jan 2024 19:38:48 +0530 Subject: [PATCH] feat: display color code Signed-off-by: supr1yo --- BackgroundColorChanger/index.html | 1 + BackgroundColorChanger/script.js | 5 +++++ BackgroundColorChanger/style.css | 8 +++++++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/BackgroundColorChanger/index.html b/BackgroundColorChanger/index.html index 1ee1531..d5d14ee 100644 --- a/BackgroundColorChanger/index.html +++ b/BackgroundColorChanger/index.html @@ -12,6 +12,7 @@

Background Color Changer

+

diff --git a/BackgroundColorChanger/script.js b/BackgroundColorChanger/script.js index 94d0166..f4f884e 100644 --- a/BackgroundColorChanger/script.js +++ b/BackgroundColorChanger/script.js @@ -6,11 +6,16 @@ function bgchange(color) { var colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"]; var colorbox = document.getElementById("colorbox"); +let hexcode = document.getElementById('hexcode'); + colorarray.forEach(function (color, index) { let span = document.createElement("span"); span.style.backgroundColor = color; span.addEventListener("click", function () { bgchange(index); + + // Display the color code + hexcode.innerHTML = colorarray[index].toUpperCase(); }); colorbox.appendChild(span); }); diff --git a/BackgroundColorChanger/style.css b/BackgroundColorChanger/style.css index 1c9ab56..9955039 100644 --- a/BackgroundColorChanger/style.css +++ b/BackgroundColorChanger/style.css @@ -11,7 +11,13 @@ body { h1 { color: #6203e0; - margin-bottom: 2rem; + margin-bottom: 1rem; +} + +p { + font-family: monospace; + padding: 5px; + font-size: large; } #colorbox {