From 4fa7e026fa8abb9c70c1100792045b81e8d84eb0 Mon Sep 17 00:00:00 2001
From: duavaini <duavaini@gmail.com>
Date: Mon, 30 Dec 2024 13:51:53 +0530
Subject: [PATCH] Update README.md

---
 week-3/easy/bg-color-changer/README.md | 115 ++++++++++++++++++++++---
 1 file changed, 103 insertions(+), 12 deletions(-)
diff --git a/week-3/easy/bg-color-changer/README.md b/week-3/easy/bg-color-changer/README.md
index 9fc2a61e..e9470bc1 100644
--- a/week-3/easy/bg-color-changer/README.md
+++ b/week-3/easy/bg-color-changer/README.md
@@ -1,17 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        
+#container{
+    padding-top: 600px;
+    align-items: center;
+    display: flex;
+    
+    justify-content: center;
 
-# BG-Color-Changer
+}
 
-Your task is to design and implement a Bg-Color-Changer application that meets the following requirements:
+#Red{
+    background-color: red;
+    color: white;
+    border-radius: 10px;
+   border-width: 0cap;
+   padding-inline: 12px;
+    padding-block: 5px;
+}
+#Green{
+    background-color: green;
+    color: white;
+    padding-inline: 12px;
+    border-width: 0cap;
+    padding-block: 5px;
+    border-radius: 10px;
+   
+}
+#Blue{
+    background-color: blue;
+    color: white;
+    padding-inline: 12px;
+    border-width: 0cap;
+    padding-block: 5px;
+    border-radius: 10px;
+}
 
-- The UI should resemble the example shown below..
+#Purple{
+    background-color: purple;
+    color: white;
+    border-width: 0cap;
+    padding-inline: 12px;
+    padding-block: 5px;
+    border-radius: 10px;
+}
+#Black{
+    background-color: black;
+    color: white;
+    border-width: 0cap;
+    padding-inline: 12px;
+    padding-block: 5px;
+    border-radius: 10px;
+}
+#Default{
+    background-color: white;
+    color: black;
+    border-width: 0cap;
+    padding-inline: 12px;
+    padding-block: 5px;
+    border-radius: 10px;
+}
+.sub{
+    margin: 5px;
 
-![Image](https://utfs.io/f/7e57da15-803c-48c7-8487-dcade58eef91-wx71zg.png)
+    cursor: pointer;
+}
+    </style>
+</head>
+<body>
+    <div id="container">
+        <button id="Red" class="sub" onclick="colourred()">Red</button> 
+        <button id="Green" class="sub" onclick="colourgreen()">Green</button>
+        <button id="Blue" class="sub" onclick="colourblue()">Blue</button>
+        <button id="Black" class="sub" onclick="colourblack()">Black</button>
+        <button id="Purple" class="sub" onclick="colourpurple()">Purple</button>
+        <button id="Default" class="sub" onclick="colourdefault()">Default</button>
+    </div>
+</body>
+<script>
+    
+function colourred() {
+    document.body.style.backgroundColor = "red";
+}
+function colourgreen() {
+    document.body.style.backgroundColor = "green";
+}
+function
+colourblue() {
+    document.body.style.backgroundColor = "blue";
+}
+function colourpurple() {
+    document.body.style.backgroundColor = "purple";
+}
+function colourblack() {
+    document.body.style.backgroundColor = "black";
+}
+function colourdefault() {
+    document.body.style.backgroundColor = "white";
+}
 
-
-- When user clicks on a red button, the background color should change to red.
-
-
-- User should also be able to add custom colors to the color panel.
-
-
-### Don't copy UI as it is, only take reference from it.
\ No newline at end of file
+</script>
+</html>
