added starter code for studio to dom-and-events

jwoolbright23 · jwoolbright23 · commit f2c92eeb2d22 · 2023-10-03T11:27:36.000-05:00
diff --git a/dom-and-events/studio/LaunchCode_rocketline_white.png b/dom-and-events/studio/LaunchCode_rocketline_white.png
diff --git a/dom-and-events/studio/index.html b/dom-and-events/studio/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Flight Simulator</title>
+        <link rel = "stylesheet" type = "text/css" href = "styles.css" />
+        <script src = "scripts.js"></script>
+    </head>
+    <body>
+        <div class="centered">
+            <h1>Flight Simulator</h1>
+            <h2>Current Flight Status</h2>
+            <p id = "flightStatus">Space shuttle ready for takeoff</p>
+            <h2>Shuttle Trajectory</h2>
+        </div>
+        <div id="flightDisplay">
+            <div class="center-block">
+                <h3>Fuel Levels</h3>
+                <p>Tank Full</p>
+                <h3>Astronaut Chat</h3>
+                <p>Houston, we are ready when you are!</p>
+            </div>
+            <div id = "shuttleBackground">
+                <img src = "LaunchCode_rocketline_white.png" height = "75" width = "75" id = "rocket"/>
+            </div>
+            <div class="center-block">
+                <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><span> miles</span>
+            </div>
+        </div>
+        <div class="centered">
+            <button id = "takeoff">Take off</button>
+            <button id = "landing">Land</button>
+            <button id = "missionAbort">Abort Mission</button>
+        </div>
+    </body>
+</html>
diff --git a/dom-and-events/studio/scripts.js b/dom-and-events/studio/scripts.js
@@ -0,0 +1,2 @@
+// Write your JavaScript code here.
+// Remember to pay attention to page loading!
diff --git a/dom-and-events/studio/styles.css b/dom-and-events/studio/styles.css
@@ -0,0 +1,30 @@
+#shuttleBackground {
+    background-color: green;
+    display: inline-block;
+    height: 80%;
+    width: 40%;
+    position: relative;
+}
+
+#flightStatus {
+    color: green;
+}
+
+#flightDisplay {
+    text-align: center; 
+    height: 400px; 
+    width: 100%;
+}
+
+#spaceShuttleHeight {
+    display: inline-block;
+}
+
+.center-block {
+    text-align: center; 
+    display: inline-block;
+}
+
+.centered {
+    text-align: center;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// Write your JavaScript code here.`
	`2`	`+// Remember to pay attention to page loading!`