Add '08_bcg-changer/' from commit '745b530bae131f1662fa1a56ba350b582156b6c3'

nirajxdev · nirajxdev · commit 79a4909feb47 · 2025-11-26T17:04:40.000+05:30
git-subtree-dir: 08_bcg-changer git-subtree-mainline: a715146 git-subtree-split: 745b530
diff --git a/08_bcg-changer/index.html b/08_bcg-changer/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Javascript Color Changer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="container">
+        <h2 id="heading">Background Color Changer</h2>
+        
+        <button class="button" id="red"></button>
+        <button class="button" id="green"></button>
+        <button class="button" id="blue"></button>
+        <button class="button" id="yellow"></button>
+        <button class="button" id="black"></button>
+
+        <h3 id="hint">Click on above box to change background color</h3>
+
+        <button id="reset">Reset</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/08_bcg-changer/script.js b/08_bcg-changer/script.js
@@ -0,0 +1,32 @@
+const buttons = document.querySelectorAll('button');
+const body = document.querySelector('body');
+
+
+buttons.forEach(function (button){
+    button.addEventListener('click', function(e){
+        if (e.target.id === 'red') {
+            body.style.backgroundColor = e.target.id;
+        }
+        if (e.target.id === 'green') {
+            body.style.backgroundColor = e.target.id;
+        }
+        if (e.target.id === 'blue') {
+            body.style.backgroundColor = e.target.id;
+        }
+        if (e.target.id === 'yellow') {
+            body.style.backgroundColor = e.target.id;
+        }
+        if (e.target.id === 'black') {
+            body.style.backgroundColor = e.target.id;
+        }
+        
+    });
+});
+
+const resetBtn = document.getElementById('reset');
+resetBtn.addEventListener('click', function(e){
+    body.style.backgroundColor = "#23282D";
+});
+
+
+
diff --git a/08_bcg-changer/style.css b/08_bcg-changer/style.css
@@ -0,0 +1,41 @@
+body {
+    display: flex;
+    justify-content: center;
+    background-color: #23282D;
+    color: #fff;
+}
+#container {
+    margin-top: 20vh;    
+
+}
+.button {
+    height: 60px;
+    width: 60px;
+}
+#red {
+    background-color: red;
+}
+#green {
+    background-color: green;
+}
+#blue {
+    background-color: blue;
+}
+#yellow {
+    background-color: yellow;
+}
+#black {
+    background-color: black;
+}
+#heading {
+    font-family:'Segoe UI', Tahoma, Verdana;
+    font-size: 25px;
+}
+#hint {
+    font-size: medium;
+}
+#reset {
+    height: 30px;
+    width: 90px;
+    
+}
