Assignment complete

Author: byui-programmer-96

dom-and-events/exercises/script.js

@@ -4,14 +4,34 @@ function init () {
     const paragraph = document.getElementById("statusReport");
 
     // Put your code for the exercises here.
-}
-
 button.addEventListener('click', event => {
-    paragraph.innerHTML = 'Houston! We have liftoff!';
- });
-
+        paragraph.innerHTML = 'Houston! We have lift off!';
+     });
+    
 missionAbort.addEventListener("mouseout", function( event ) {
-    event.target.style.backgroundColor = "";
- });
+        event.target.style.backgroundColor = "";
+     });    
+}
+document.addEventListener('DOMContentLoaded', function() {
+    const abortButton = document.getElementById('abortMission');
+    
+    abortButton.addEventListener('click', function() {
+        // Show confirmation dialog
+        const confirmAbort = confirm('Are you sure you want to abort the mission?');
+        
+        if (confirmAbort) {
+            // User confirmed, change the button text
+            abortButton.textContent = 'Mission aborted! Space shuttle returning home.';
+            
+            // Optionally, disable the button after aborting
+            abortButton.disabled = true;
+            
+            // Optionally, change the button's appearance to indicate aborted state
+            abortButton.style.backgroundColor = 'gray';
+            abortButton.style.color = 'white';
+        }
+        // If user cancels, do nothing and the button remains unchanged
+    });
+});
 
-window.addEventListener("load", init);
+window.addEventListener("load", init);

dom-and-events/exercises/style.css

@@ -1,3 +1,16 @@
 h1 {
   text-decoration: underline;
 }
+#abortMission {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    transition: background-color 0.3s ease;
+}
+
+#abortMission:hover {
+    background-color: red;
+    color: white;
+}