Skip to content

Commit 561b8bd

Browse files
timwebdev1timwebdev1
committed
completed DOM studio
1 parent fa77b46 commit 561b8bd

2 files changed

Lines changed: 115 additions & 34 deletions

File tree

‎dom-and-events/studio/index.html‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Flight Simulator</title>
5-
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
6-
<script src = "scripts.js"></script>
7-
</head>
8-
<body>
9-
<div class="centered">
10-
<h1>Flight Simulator</h1>
11-
<h2>Current Flight Status</h2>
12-
<p id = "flightStatus">Space shuttle ready for takeoff</p>
13-
<h2>Shuttle Trajectory</h2>
3+
4+
<head>
5+
<title>Flight Simulator</title>
6+
<link rel="stylesheet" type="text/css" href="styles.css" />
7+
<script src="scripts.js"></script>
8+
</head>
9+
10+
<body>
11+
<div class="centered">
12+
<h1>Flight Simulator</h1>
13+
<h2>Current Flight Status</h2>
14+
<p id="flightStatus">Space shuttle ready for takeoff</p>
15+
<h2>Shuttle Trajectory</h2>
16+
</div>
17+
<div id="flightDisplay">
18+
<div class="center-block">
19+
<h3>Fuel Levels</h3>
20+
<p>Tank Full</p>
21+
<h3>Astronaut Chat</h3>
22+
<p>Houston, we are ready when you are!</p>
1423
</div>
15-
<div id="flightDisplay">
16-
<div class="center-block">
17-
<h3>Fuel Levels</h3>
18-
<p>Tank Full</p>
19-
<h3>Astronaut Chat</h3>
20-
<p>Houston, we are ready when you are!</p>
21-
</div>
22-
<div id = "shuttleBackground">
23-
<img src = "LaunchCode_rocketline_white.png" height = "75" width = "75" id = "rocket"/>
24-
</div>
25-
<div class="center-block">
26-
<button id="up">Up</button>
27-
<button id="down">Down</button>
28-
<button id="right">Right</button>
29-
<button id="left">Left</button>
30-
<h3>Space Shuttle Height</h3>
31-
<p id="spaceShuttleHeight">0</p><span> miles</span>
32-
</div>
24+
<div id="shuttleBackground">
25+
<img src="LaunchCode_rocketline_white.png" height="75" width="75" id="rocket"
26+
style="position: absolute; bottom: 0; left: calc(50% - 38px)" />
3327
</div>
34-
<div class="centered">
35-
<button id = "takeoff">Take off</button>
36-
<button id = "landing">Land</button>
37-
<button id = "missionAbort">Abort Mission</button>
28+
<div class="center-block">
29+
<button id="up">Up</button>
30+
<button id="down">Down</button>
31+
<button id="right">Right</button>
32+
<button id="left">Left</button>
33+
<h3>Space Shuttle Height</h3>
34+
<p id="spaceShuttleHeight">0</p><span> miles</span>
3835
</div>
39-
</body>
36+
</div>
37+
<div class="centered">
38+
<button id="takeoff">Take off</button>
39+
<button id="landing">Land</button>
40+
<button id="missionAbort">Abort Mission</button>
41+
</div>
42+
</body>
43+
4044
</html>

‎dom-and-events/studio/scripts.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,79 @@
11
// Write your JavaScript code here.
22
// Remember to pay attention to page loading!
3+
window.addEventListener("load", function () {
4+
5+
let altitude = 0;
6+
let rocketPostX = 0;
7+
let rocketPostY = 0;
8+
9+
// BUTTONS
10+
const takeOffButton = document.getElementById("takeoff");
11+
const landButton = document.getElementById("landing");
12+
const AbortButton = document.getElementById("missionAbort");
13+
14+
// AREAS
15+
const flightStatus = document.getElementById("flightStatus");
16+
const shuttleBackground = document.getElementById("shuttleBackground");
17+
const spaceShuttleHeight = document.getElementById("spaceShuttleHeight");
18+
19+
// ROCKET IMAGE
20+
const rocket = document.getElementById("rocket");
21+
22+
takeOffButton.addEventListener("click", function () {
23+
let confirmed = window.confirm(
24+
"Confirm that the shuttle is ready for takeoff."
25+
);
26+
27+
if (confirmed) {
28+
flightStatus.innerHTML = "Shuttle in flight.";
29+
shuttleBackground.style.backgroundColor = "blue";
30+
altitude = 10000;
31+
spaceShuttleHeight.innerHTML = altitude;
32+
}
33+
});
34+
landButton.addEventListener("click", function () {
35+
alert("The shuttle is landing. Landing gear engaged.");
36+
37+
if (landing) {
38+
flightStatus.innerHTML = "The shuttle has landed.";
39+
shuttleBackground.style.backgroundColor = "green";
40+
spaceShuttleHeight.innerHTML = "0";
41+
}
42+
});
43+
44+
AbortButton.addEventListener("click", function() {
45+
alert("Confirm that you want to abort the mission.");
46+
47+
if (missionAbort) {
48+
flightStatus.innerHTML = "Mission aborted.";
49+
shuttleBackground.style.backgroundColor = "green";
50+
spaceShuttleHeight.innerHTML = "0";
51+
}
52+
});
53+
54+
// Use event delegation for directional buttons
55+
document.addEventListener("click", function(event) {
56+
57+
if (event.target.id === "left") {
58+
rocketPostX -= 10;
59+
rocket.style.marginLeft = rocketPostX + "px";
60+
}
61+
if (event.target.id === "right") {
62+
rocketPostX += 10;
63+
rocket.style.marginLeft = rocketPostX + "px";
64+
}
65+
if (event.target.id === "up") {
66+
rocketPostY += 10;
67+
rocket.style.marginBottom = rocketPostY + "px";
68+
altitude += 10000;
69+
spaceShuttleHeight.innerHTML = altitude;
70+
}
71+
if (event.target.id === "down") {
72+
rocketPostY -= 10;
73+
rocket.style.marginBottom = rocketPostY + "px";
74+
altitude -= 10000;
75+
spaceShuttleHeight.innerHTML = altitude;
76+
}
77+
});
78+
79+
});

0 commit comments

Comments
 (0)