Skip to content

Commit ed12242

Browse files
author
Michael
committed
I tried
1 parent 9e88293 commit ed12242

File tree

2 files changed

+157
-37
lines changed

2 files changed

+157
-37
lines changed

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

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,47 @@
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>
14-
</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>
33-
</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>
38-
</div>
39-
</body>
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>
14+
</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
24+
src="LaunchCode_rocketline_white.png"
25+
height="75"
26+
width="75"
27+
id="rocket"
28+
style="position: absolute; bottom: 0%; left: calc(50% - 38px)"
29+
/>
30+
</div>
31+
<div class="center-block">
32+
<button id="up">Up</button>
33+
<button id="down">Down</button>
34+
<button id="right">Right</button>
35+
<button id="left">Left</button>
36+
<h3>Space Shuttle Height</h3>
37+
<p id="spaceShuttleHeight">0</p>
38+
<span> miles</span>
39+
</div>
40+
</div>
41+
<div class="centered">
42+
<button id="takeoff">Take off</button>
43+
<button id="landing">Land</button>
44+
<button id="missionAbort">Abort Mission</button>
45+
</div>
46+
</body>
4047
</html>

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,115 @@
11
// Write your JavaScript code here.
22
// Remember to pay attention to page loading!
3+
4+
window.addEventListener("load" , () => {
5+
6+
7+
let altitude = 0;
8+
let rocketPosX = 0;
9+
let rocketPosY = 0;
10+
11+
const takeOff = document.querySelector("#takeoff");
12+
const land = document.querySelector("#landing");
13+
const abort = document.querySelector("#missionAbort");
14+
// const up = document.querySelector("#up");
15+
// const down = document.querySelector("#down");
16+
// const right = document.querySelector("#right");
17+
// const left = document.querySelector("#left");
18+
19+
const flightStatus = document.querySelector("#flightStatus");
20+
const shuttleBackground = document.querySelector("#shuttleBackground");
21+
const shuttleHeight = document.querySelector("#spaceShuttleHeight");
22+
const rocket = document.querySelector("#rocket")
23+
rocket.style.position = "abolute"
24+
rocket.style.top = "50px"
25+
26+
takeOff.addEventListener("click", (event) => {
27+
let shouldTakeoff = confirm(`\n Are you sure this is ready to take off?\n`);
28+
if(!shouldTakeoff){
29+
event.preventDefault();
30+
return;
31+
}
32+
flightStatus.innerHTML = "Shuttle in flight.";
33+
shuttleBackground.style.background = "blue";
34+
shuttleHeight.textContent = 10000;
35+
36+
});
37+
38+
land.addEventListener("click" , (event) => {
39+
if (shuttleBackground.style.background === "green") {
40+
alert("\n You're still on the ground. Touch some grass");
41+
return;
42+
}
43+
alert(`\nThe shuttle is landing. Landing gear engaged.\n`);
44+
45+
flightStatus.innerHTML = "The shuttle has landed";
46+
shuttleBackground.style.background = "green"
47+
shuttleHeight.innerHTML = 0 ;
48+
});
49+
50+
abort.addEventListener("click", (event) => {
51+
let shouldAbort = confirm(`\nAre you sure you want to abort?\n Lots of hard work went into this`);
52+
if(!shouldAbort) {
53+
event.preventDefault();
54+
return;
55+
}
56+
flightStatus.innerHTML = "Mission aborted";
57+
shuttleBackground.style.background = "green"
58+
shuttleHeight.innerHTML = 0;
59+
});
60+
61+
// up.addEventListener("click", () => {
62+
// if (parseInt(shuttleHeight.innerHTML) === 0) {
63+
// alert(`\n You have to take off first!`)
64+
// return;
65+
// }
66+
// let currentHeight = shuttleHeight.innerHTML
67+
// shuttleHeight.innerHTML = parseInt(currentHeight) + 10000
68+
69+
// });
70+
71+
// down.addEventListener("click", () =>{
72+
// if (parseInt(shuttleHeight.innerHTML) === 0) {
73+
// alert(`\n You crashed your ship!`)
74+
// return;
75+
// }
76+
77+
// if (parseInt(flightStatus.innerHTML) <= 10000) {
78+
// alert(`There is no room to go down`);
79+
// return;
80+
// }
81+
82+
// let currentHeight = shuttleHeight.innerHTML
83+
// shuttleHeight.innerHTML = parseInt(currentHeight) - 10000
84+
85+
86+
87+
// });
88+
// });
89+
90+
document.addEventListener("click", function(event) {
91+
let bkgWidth = parseInt(window.getComputedStyle(shuttleBackground).getPropertyValue('width'));
92+
93+
if (event.target.id === "left" && rocketPosX > -(bkgWidth / 2) - 40) {
94+
rocketPosX -= 10;
95+
rocket.style.marginLeft = rocketPosX + 'px';
96+
}
97+
if (event.target.id === "right" && rocketPosX < (bkgWidth / 2 - 40)) {
98+
rocketPosX += 10;
99+
rocket.style.marginLeft = rocketPosX + 'px';
100+
}
101+
if (event.target.id === "up" && altitude < 250000) {
102+
rocketPosY += 10;
103+
rocket.style.marginBottom = rocketPosY + 'px';
104+
altitude += 10000;
105+
spaceShuttleHeight.innerHTML = altitude;
106+
}
107+
if (event.target.id === "down" && altitude > 0) {
108+
rocketPosY -= 10;
109+
rocket.style.marginBottom = rocketPosY + 'px';
110+
altitude -= 10000;
111+
spaceShuttleHeight.innerHTML = altitude;
112+
}
113+
114+
});
115+
});

0 commit comments

Comments
 (0)