diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..8388f07
--- /dev/null
+++ b/.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}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..fc19677
--- /dev/null
+++ b/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.
diff --git a/index.html b/index.html
index 1efd507..30fcfab 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,8 @@
Astronaut Chat
Space Shuttle Height
0
miles
+
Space Shuttle width
+
0
miles
diff --git a/scripts.js b/scripts.js
index 45c9b3a..7722c38 100644
--- a/scripts.js
+++ b/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;
+// }
+
+// });
+
+// });
diff --git a/styles.css b/styles.css
index cc932dd..f40160b 100644
--- a/styles.css
+++ b/styles.css
@@ -19,7 +19,9 @@
#spaceShuttleHeight {
display: inline-block;
}
-
+#spaceShuttleWidth {
+ display: inline-block;
+}
.center-block {
text-align: center;
display: inline-block;