Successful Launch

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README.md

@@ -0,0 +1,32 @@
+# DOM-and-Events-Studio
+Use the window load event to ensure all elements have loaded before attaching event handlers.
+
+1. When the "Take off" button is clicked, the following should happen:
+
+A window confirm should let the user know "Confirm that the shuttle is ready for takeoff." If the shuttle is ready for liftoff, then add parts b-d.
+The flight status should change to "Shuttle in flight."
+The background color of the shuttle flight screen (id = "shuttleBackground") should change from green to blue.
+The shuttle height should increase by 10,000 miles.
+
+2. When the "Land" button is clicked, the following should happen:
+
+A window alert should let the user know "The shuttle is landing. Landing gear engaged."
+The flight status should change to "The shuttle has landed."
+The background color of the shuttle flight screen should change from blue to green.
+The shuttle height should go down to 0.
+
+3.When the "Abort Mission" button is clicked, the following should happen:
+
+A window confirm should let the user know "Confirm that you want to abort the mission." If the user wants to abort the mission, then add parts b-d.
+The flight status should change to "Mission aborted."
+The background color of the shuttle flight screen should change from blue to green.
+The shuttle height should go to 0.
+
+4.When the "Up", "Down", "Right", and "Left" buttons are clicked, the following should happen:
+
+The rocket image should move 10 px in the direction of the button that was clicked.
+If the "Up" or "Down" buttons were clicked, then the shuttle height should increase or decrease by 10,000 miles.
+23.8.3. 
+
+5. Keep the rocket from flying off of the background.
+Return the rocket to its original position on the background when it has been landed or the mission was aborted.

index.html

@@ -29,6 +29,8 @@ <h3>Astronaut Chat</h3>
                 <button id="left">Left</button>
                 <h3>Space Shuttle Height</h3>
                 <p id="spaceShuttleHeight">0</p><span> miles</span>
+                <h3>Space Shuttle width</h3>
+                <p id="spaceShuttleWidth">0</p><span> miles</span>
             </div>
         </div>
         <div class="centered">

scripts.js

@@ -1,2 +1,146 @@
 // Write your JavaScript code here.
+
 // Remember to pay attention to page loading!
+window.addEventListener("load", function() {
+
+    let imgObj = document.getElementById('rocket');
+    imgObj.style.position= 'absolute';
+    imgObj.style.left = '-20px';
+    imgObj.style.bottom = '0px';
+    let status = document.getElementById('flightStatus');
+    let shuttleHeight = document.getElementById('spaceShuttleHeight');
+    // bonus 
+    let shuttleWidth = document.getElementById('spaceShuttleWidth');
+    //
+    let bg = document.getElementById('shuttleBackground');
+
+    let right = this.document.getElementById('right');
+    right.addEventListener("click", function () {
+      // if statement is bonus 
+      if (shuttleWidth.innerHTML != "280000"){
+        movement = parseInt(imgObj.style.left) + 10 + 'px';
+        imgObj.style.left = movement;
+        shuttleWidth.innerHTML = parseInt(shuttleWidth.innerHTML) + 10000;
+      }
+    });
+
+    let left = this.document.getElementById('left');
+    left.addEventListener("click", function () {
+      // if statement is bonus 
+      if (shuttleWidth.innerHTML != "0"){
+        movement = parseInt(imgObj.style.left) - 10 +'px';
+        imgObj.style.left = movement;
+        shuttleWidth.innerHTML = parseInt(shuttleWidth.innerHTML) - 10000;
+      }
+    });
+
+    let down = this.document.getElementById('down');
+    down.addEventListener("click", function () {
+      // if statement is bonus 
+      if (shuttleHeight.innerHTML != "0"){
+        movement = parseInt(imgObj.style.bottom) - 10 + 'px';
+        imgObj.style.bottom = movement;
+        shuttleHeight.innerHTML = parseInt(shuttleHeight.innerHTML) - 10000;
+      }
+    });
+
+    let up = this.document.getElementById('up');
+    up.addEventListener("click", function () {
+      // if statment is bonus 
+      if (shuttleHeight.innerHTML != "250000"){
+        movement = parseInt(imgObj.style.bottom) + 10 + 'px';
+        imgObj.style.bottom = movement;
+        shuttleHeight.innerHTML = parseInt(shuttleHeight.innerHTML) + 10000;
+      }
+    });
+
+    let takeOff = this.document.getElementById('takeoff');
+    takeOff.addEventListener("click", function () {
+        result = window.confirm("Are you sure the shuttle is ready for takeoff?");
+        if (result) {
+            bg.style.backgroundColor = 'blue';
+            // bonus 
+            movement = parseInt(imgObj.style.bottom) + 200 + 'px';
+            imgObj.style.bottom = movement;
+            //
+            shuttleHeight.innerHTML = '10000';
+            status.innerHTML = "Shuttle in flight";
+        }
+    });
+
+    let land = this.document.getElementById('landing');
+    land.addEventListener("click", function () {
+        bg.style.backgroundColor = 'green';
+       result= window.confirm('The shuttle is landing. Landing gear engaged.');
+       if(result){ shuttleHeight.innerHTML = '0';
+        shuttleWidth.innerHTML = '0';
+        status.innerHTML = "Shuttle landed";
+        imgObj.style.bottom = '0px';
+        imgObj.style.left = '-20px';}
+    });
+
+    let missionAbort = this.document.getElementById('missionAbort');
+    missionAbort.addEventListener("click", function () {
+        result = window.confirm("Are you sure you want to end the mission?");
+        if (result) {
+            bg.style.backgroundColor = 'green';
+            shuttleHeight.innerHTML = '0';
+            shuttleWidth.innerHTML = '0';
+            status.innerHTML = "Mission aborted";
+            imgObj.style.bottom = '0px';
+            imgObj.style.left = '-20px';
+        }
+    });
+
+});
+// window.addEventListener("load", function(){
+
+
+//     let takeOffbtn=this.document.getElementById("takeoff");
+//     let flightStatus=this.document.getElementById("flightStatus");
+//     let backgroundColor=this.document.getElementById("shuttleBackground");
+//     let shuttleHeight= this.document.getElementById("spaceShuttleHeight");
+
+//     let landbtn=this.document.getElementById("landing");
+
+//     let abbortMissionbtn=this.document.getElementById("missionAbort");
+
+
+//     takeOffbtn.addEventListener("click", function(){
+
+//      let response=window.confirm("Confirm that the shuttle is ready for takeoff.");
+//      if(response)
+//      {
+//     flightStatus.innerHTML= "Shuttle in flight";
+//      backgroundColor.style.backgroundColor="blue";
+//      shuttleHeight.innerHTML=10000;
+//      }
+
+//     });
+
+
+//     landbtn.addEventListener("click", function(){
+
+//         let response=window.confirm("The shuttle is landing. Landing gear engaged.");
+//         if(response)
+//         {
+//        flightStatus.innerHTML= "The shuttle has landed.";
+//         backgroundColor.style.backgroundColor="green";
+//         shuttleHeight.innerHTML=0;
+//         }
+
+//        });
+
+//        abbortMissionbtn.addEventListener("click", function(){
+
+//         let response=window.confirm("Confirm that you want to abort the mission.");
+//         if(response)
+//         {
+//        flightStatus.innerHTML= "Mission aborted.";
+//         backgroundColor.style.backgroundColor="green";
+//         shuttleHeight.innerHTML=0;
+//         }
+
+//        });
+
+// });

styles.css

@@ -19,7 +19,9 @@
 #spaceShuttleHeight {
     display: inline-block;
 }
-
+#spaceShuttleWidth {
+    display: inline-block;
+}
 .center-block {
     text-align: center; 
     display: inline-block;