feat: display color code

Signed-off-by: supr1yo <[email protected]>
shrey141102 · Jan 5, 2024 · e686ed2 · e686ed2
1 parent 2fa3147
commit e686ed2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/BackgroundColorChanger/index.html b/BackgroundColorChanger/index.html
@@ -12,6 +12,7 @@
 
 <body>
 	<h1>Background Color Changer</h1>
+	<p id="hexcode"></p>
 	<div id="colorbox"></div>
 
 	<script src="script.js"></script>

diff --git 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
@@ -11,7 +11,13 @@ body {
 
 h1 {
 	color: #6203e0;
-	margin-bottom: 2rem;
+	margin-bottom: 1rem;
+}
+
+p {
+	font-family: monospace;
+	padding: 5px;
+	font-size: large;
 }
 
 #colorbox {