Add content to display message on-click

Author: Hpunia1

BulbOnOffButton/LakshyaMalik/index.html

@@ -14,7 +14,14 @@ <h1>Toggle the given Button to turn the bulb On or Off</h1>
     <div class="container">
         <img src="./assets/Bulb-off2.png" alt="Bulb is turned On" id="bulbimg">
         <button title="press to toggle" onclick="ToggleBulb()" class="btn"><img src="./assets/switch-button.svg" alt="On/off"></button>
+        
     </div>
+    <div id="dialogueBox" class="dialogue-box" style="display:none;">
+        <p>Don't forget to turn it off before leaving</p>
+        <button class="ok-button" onclick="closeDialogue()">Ok</button>
+    </div>    
+    
+    
 
     <script src="./script.js"></script>
 </body>

BulbOnOffButton/LakshyaMalik/script.js

@@ -6,9 +6,26 @@ const ToggleBulb = () =>{
     if (Bulb.src.match('./assets/Bulb-on2.png')){
         Bulb.setAttribute('src','./assets/Bulb-off2.png');
         console.log('dfghjkl');
+        closeDialogue();
     }
 
     else{
         Bulb.setAttribute('src','./assets/Bulb-on2.png');
+        openDialogue();
     }
+}
+const openDialogue = () => {
+    document.getElementById("dialogueBox");
+    dialogueBox.style.display = "inline-grid";
+    dialogueBox.style.position = "fixed"; // Use absolute if you want it relative to a positioned ancestor
+    dialogueBox.style.top = "60%";
+    dialogueBox.style.left = "56%";
+
+    
+}
+
+
+
+const closeDialogue = () => {
+    document.getElementById("dialogueBox").style.display = "none";
 }

BulbOnOffButton/LakshyaMalik/style.css

@@ -4,7 +4,7 @@
 }
 
 .bg{
-    background-color: #070707;
+    background-color: #8c8686;
 }
 
 .container {
@@ -52,6 +52,37 @@
         justify-self: auto;
         margin: 0;
     }
+    .dialogue-box {
+
+      margin-left: 600px;
+      background-color: white;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      z-index: 1000;
+
+     
+  }
+  
+  .dialogue-box p {
+   
+    margin-bottom: 10px;
+}
+
+
+  .ok-button {
+      width: 200px;
+      padding: 5px 10px;
+      background-color: #4CAF50;
+      color: white;
+      border: #8c8686;
+      border-radius: 3px;
+      cursor: pointer;
+      margin-top: 10px; /* Add some space between the paragraph and the button */
+      margin-left: 600px;
+  }
+  
+
 
     #bulbimg {
       width: 100%;