Added Bulb JS project

sivangbagri · sivangbagri · commit d11c28a90500 · 2023-10-16T17:37:31.000+05:30
diff --git a/Bulb/sivangbagri/bulb.html b/Bulb/sivangbagri/bulb.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Image Carousel</title>
+    <link rel="stylesheet" type="text/css" href="styles.css?ref=v1" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+        crossorigin="anonymous"></script>
+</head>
+
+<body class="bg-black">
+
+
+        <div class="slide flex flex-col items-center">
+            <div class="bulb mt-5">
+                <img src="https://i.postimg.cc/KjK1wL3c/bulb-off.png" id="bulb" width="200">
+            </div>
+            <div class="bulbSwitch mt-20">
+                <div class="form-check form-switch" onclick="lightSwitch()" id="bulbSwitch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
+                        style="transform: scale(6);">
+                </div>
+            </div>
+        </div>
+    <script src="bulb.js"></script>
+</body>
+
+</html>
diff --git a/Bulb/sivangbagri/bulb.js b/Bulb/sivangbagri/bulb.js
@@ -0,0 +1,21 @@
+const BULB_ON_URL = "https://i.postimg.cc/6QyTynzr/bulb-on.png";
+const BULB_OFF_URL = "https://i.postimg.cc/KjK1wL3c/bulb-off.png";
+
+function lightSwitch() {
+  const checkbox = document.getElementById("flexSwitchCheckChecked");
+  if (checkbox.checked) {
+    bulb_on();
+  } else {
+    bulb_off();
+  }
+}
+
+function bulb_on() {
+  const bulb = document.getElementById("bulb");
+  bulb.src = BULB_ON_URL;
+}
+
+function bulb_off() {
+  const bulb = document.getElementById("bulb");
+  bulb.src = BULB_OFF_URL;
+}
diff --git a/Bulb/sivangbagri/readme.md b/Bulb/sivangbagri/readme.md
@@ -0,0 +1,39 @@
+# Bulb Toggle Project
+
+This is a simple project that demonstrates how to create a toggle button to switch a bulb on and off using HTML, CSS, JavaScript, and Bootstrap.
+
+## Table of Contents
+
+- [Project Overview](#project-overview)
+- [Tech Stack](#tech-stack)
+- [Getting Started](#getting-started)
+- [Usage](#usage)
+- [License](#license)
+
+## Project Overview
+
+This project provides a basic example of how to create a toggle button to turn a virtual bulb on and off. The toggle button changes the color of the bulb and updates its state accordingly.
+
+## Tech Stack
+
+- HTML
+- CSS
+- JavaScript
+- Bootstrap
+
+## Getting Started
+
+1. Clone the repository or download the source code.
+
+2. Open `index.html` in a web browser to see the project in action.
+
+## Usage
+
+1. Open the `index.html` file in a web browser.
+
+2. Click the toggle button to switch the bulb on and off. The bulb's color will change based on its state.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
+Feel free to modify and distribute the code as needed.
