Merge pull request #206 from supr1yo/BackgroundColorChanger

[KWoC] Feature: Display color code
shrey141102 · Jan 5, 2024 · 15900c9 · 15900c9
2 parents 2fa3147 + 0d47193
commit 15900c9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/BackgroundColorChanger/README.md b/BackgroundColorChanger/README.md
@@ -1,22 +1,26 @@
 # BackgroundColorChanger
+<div style="text-align:center">
+<img src='./Screenshot.png' width='500px'>
 
+</div>
+<br>
 This application is a very simple implementation of javascript. We can change the background colors using this.
 
-# Features
+## Features
 
 Change the background color of the webpage by selecting a color from a predefined list.
 
-# Installation
+## Installation
 
 No need for any installation just open the html application in your browser.
 
-# Getting started
+## Getting started
 
 1. Download index.html, style.css and script.js.
 2. Open the "index.html" file in your web browser.
 3. Start changing colors from the given palette.
 
-# Usage
+## Usage
 You will see this option for changing the background color:
 
 Color Options: Click on the color swatches to change the background color to the selected color.

diff --git a/BackgroundColorChanger/Screenshot.png b/BackgroundColorChanger/Screenshot.png
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 {