Dom and events exercises

Author: ChronicleGremlin

dom-and-events/exercises/script.js

@@ -1,10 +1,27 @@
-function init () {
+function init() {
     const missionAbort = document.getElementById("abortMission");
     const button = document.getElementById("liftoffButton");
     const paragraph = document.getElementById("statusReport");
 
     // Put your code for the exercises here.
-    
+    button.addEventListener('click', event => {
+        paragraph.innerHTML = 'Houston! We have liftoff!';
+    });
+
+    missionAbort.addEventListener('mouseover', function( event ) {
+        event.target.style.backgroundColor = "red";
+    });
+
+    missionAbort.addEventListener('mouseout', function( event ) {
+        event.target.style.backgroundColor = "";
+    });
+
+    missionAbort.addEventListener('click', event => {
+        window.confirm("Are you sure you want to abort the mission?")
+        if(true){
+            paragraph.innerHTML = 'Mission aborted! Space shuttle returning home.';
+        }
+    })
 }
 
-window.addEventListener("load", init);
+window.addEventListener('load', init);

dom-and-events/exercises/style.css

@@ -1,3 +1,9 @@
+body {
+  background-color: rgb(179, 226, 183);
+}
+
 h1 {
   text-decoration: underline;
 }
+
+