Studio assignment done.

index.html

@@ -23,16 +23,16 @@ <h3>Astronaut Chat</h3>
                 <img src = "LaunchCode_rocketline_white.png" height = "75" width = "75" id = "rocket"/>
             </div>
             <div style = "text-align: center; display: inline-block;">
-                    <button>Up</button>
-                    <button>Down</button>
-                    <button>Right</button>
-                    <button>Left</button>
+                    <button id = "up">Up</button>
+                    <button id = "down">Down</button>
+                    <button id = "right">Right</button>
+                    <button id ="left">Left</button>
                     <h3>Space Shuttle Height</h3>
                     <p id="spaceShuttleHeight">0</p><p style = "display: inline-block;"> miles</p>
             </div>
         </div>
         <div style="text-align: center;">
-            <button id = "takeoff">Take off</button>
+            <button id = "takeOff">Take off</button>
             <button id = "landing">Land</button>
             <button id = "missionAbort">Abort Mission</button>
     </div>

scripts.js

@@ -1,2 +1,69 @@
 // Write your JavaScript code here.
-// Remember to pay attention to page loading!
+// Remember to pay attention to page loading!
+
+window.addEventListener("load", function(){
+    let status = this.document.getElementById("flightStatus");
+    let bg = this.document.getElementById("shuttleBackground");
+    let shuttleHeight = this.document.getElementById("spaceShuttleHeight");
+    let rocketImg = this.document.getElementById("rocket");
+    rocketImg.style.position = "absolute";
+    rocketImg.style.left = "0px";
+    rocketImg.style.bottom = "0px";
+
+    let left = this.document.getElementById("left");
+    left.addEventListener("click", function(){
+        if (parseInt(rocketImg.style.left) > 0){
+            rocketImg.style.left = parseInt(rocketImg.style.left) - 10 + "px";
+        }
+    })
+
+    let right = this.document.getElementById("right");
+    right.addEventListener("click", function(){
+        if (parseInt(rocketImg.style.left) < 300){
+            rocketImg.style.left = parseInt(rocketImg.style.left) + 10 + "px";
+        }   
+    })
+
+    let up = this.document.getElementById("up");
+    up.addEventListener("click", function(){
+        if (parseInt(rocketImg.style.bottom) < 250) {
+            rocketImg.style.bottom = parseInt(rocketImg.style.bottom) + 10 + "px";
+            shuttleHeight.innerHTML = parseInt(shuttleHeight.innerHTML) + 10000;
+        }     
+    })
+    let down = this.document.getElementById("down");
+    down.addEventListener("click", function(){
+        if (parseInt(rocketImg.style.bottom) > 0) {
+        rocketImg.style.bottom = parseInt(rocketImg.style.bottom) - 10 + "px";
+        shuttleHeight.innerHTML = parseInt(shuttleHeight.innerHTML) - 10000;
+        }    
+    })
+
+    let takeOff = this.document.getElementById("takeOff");
+    takeOff.addEventListener("click", function(){
+        if (window.confirm("Are you sure the shuttle is ready for takeoff?")){
+            status.innerHTML = "Shuttle in flight";
+            bg.style.backgroundColor = "blue";
+            shuttleHeight.innerHTML = "10000";
+        }
+    })
+
+    let landing = this.document.getElementById("landing");
+    landing.addEventListener("click", function(){
+            window.alert("The shuttle is landing. landing gear engaged.");
+            status.innerHTML = "Shuttle landed";
+            bg.style.backgroundColor = "green";
+            shuttleHeight.innerHTML = "0";
+            rocketImg.style.bottom = "0px";     
+    })
+
+    let missionAbort = this.document.getElementById("missionAbort");
+    missionAbort.addEventListener("click", function(){
+            window.alert("Confirm that you want to abort the mission.");
+            status.innerHTML = "Mission aborted";
+            bg.style.backgroundColor = "green";
+            shuttleHeight.innerHTML = "0";
+
+})
+
+})