Skip to content

Commit d458acb

Browse files
sswietoniowskisswietoniowski
committed
feat: solve 4th stage of the Hyperskill project "Open Space"
1 parent f80428b commit d458acb

File tree

4 files changed

+183
-0
lines changed

4 files changed

+183
-0
lines changed

‎hyperskill/06_open_space/04/.gitkeep

Whitespace-only changes.

‎hyperskill/06_open_space/04/app.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
window.onload = function() {
2+
const password = document.getElementById('password');
3+
const okButton = document.getElementById('ok-button');
4+
const launchButton = document.getElementById('launch-button');
5+
const checkButtons = document.querySelectorAll('.check-button');
6+
const levers = document.querySelectorAll('.lever');
7+
8+
const disableLaunchPanel = () => {
9+
launchButton.disabled = true;
10+
checkButtons.forEach(button => button.disabled = true);
11+
levers.forEach(lever => lever.disabled = true);
12+
}
13+
14+
const enableLaunchPanel = () => {
15+
launchButton.disabled = false;
16+
checkButtons.forEach(button => button.disabled = false);
17+
levers.forEach(lever => lever.disabled = false);
18+
}
19+
20+
const disablePasswordCheck = () => {
21+
password.disabled = true;
22+
okButton.disabled = true;
23+
}
24+
25+
okButton.onclick = () => {
26+
if (password.value === 'TrustNo1') {
27+
enableLaunchPanel();
28+
disablePasswordCheck();
29+
}
30+
}
31+
32+
disableLaunchPanel();
33+
}

‎hyperskill/06_open_space/04/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Open Space</title>
6+
<link rel="stylesheet" href="style.css">
7+
<script src="app.js" defer></script>
8+
</head>
9+
<body>
10+
<div class="space">
11+
<div class="planet-area">
12+
<img class="planet" alt="" src="https://stepik.org/media/attachments/lesson/452681/mars.png"/>
13+
<img class="rocket" alt="" src="https://stepik.org/media/attachments/lesson/452681/rocket.png"/>
14+
</div>
15+
<div class="control-panel">
16+
<div class="control-panel__inner">
17+
<input type="password" class="password-button" placeholder="Enter password to unlock" id="password">
18+
<input type="button" value="ok" class="ok-button" id="ok-button">
19+
<div class="check-buttons">
20+
<input type="button" value=" " class="check-button">
21+
<input type="button" value=" " class="check-button">
22+
<input type="button" value=" " class="check-button">
23+
<input type="button" value=" " class="check-button">
24+
<input type="button" value=" " class="check-button">
25+
<input type="button" value=" " class="check-button">
26+
</div>
27+
<div class="levers">
28+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
29+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
30+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
31+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
32+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
33+
</div>
34+
<input type="button" class="launch-button" value="Launch" id="launch-button">
35+
</div>
36+
</div>
37+
</div>
38+
</body>
39+
</html>

‎hyperskill/06_open_space/04/style.css

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
.space {
2+
position: relative;
3+
height: 100vh;
4+
width: 100vw;
5+
background: url("https://stepik.org/media/attachments/lesson/452681/space.png") repeat center center;
6+
z-index: 1;
7+
}
8+
9+
.planet-area {
10+
position: absolute;
11+
height: 30vmin;
12+
width: 30vmin;
13+
bottom: 0;
14+
left: 0;
15+
}
16+
17+
.planet {
18+
position: absolute;
19+
bottom: 0;
20+
left: 0;
21+
z-index: 3;
22+
}
23+
24+
.rocket {
25+
position: absolute;
26+
bottom: 110%;
27+
left: 110%;
28+
transform: rotate(35deg) scale(0.3);
29+
z-index: 2;
30+
}
31+
32+
.control-panel {
33+
position: absolute;
34+
top: 50vh;
35+
right: 20vw;
36+
padding: 20px;
37+
background: repeating-linear-gradient(
38+
45deg,
39+
yellow,
40+
yellow 10px,
41+
black 10px,
42+
black 20px
43+
);
44+
}
45+
46+
.control-panel__inner {
47+
padding: 20px;
48+
display: flex;
49+
flex-direction: column;
50+
justify-content: center;
51+
align-items: center;
52+
position: relative;
53+
background: black;
54+
}
55+
56+
.password-button {
57+
color: white;
58+
background: black;
59+
border: yellow 2px solid;
60+
border-radius: 5px;
61+
padding-right: 20px;
62+
}
63+
64+
.ok-button {
65+
color: black;
66+
background: yellow;
67+
border-radius: 5px;
68+
}
69+
70+
.check-buttons {
71+
display: flex;
72+
flex-direction: row;
73+
justify-content: center;
74+
align-items: center;
75+
margin-top: 20px;
76+
margin-bottom: 20px;
77+
}
78+
79+
.levers {
80+
display: flex;
81+
flex-direction: row;
82+
justify-content: center;
83+
align-items: center;
84+
width: auto;
85+
flex-wrap: wrap;
86+
}
87+
88+
input[type=range][orient=vertical] {
89+
appearance: slider-vertical;
90+
width: 8px;
91+
height: 64px;
92+
padding: 0 5px;
93+
}
94+
95+
.launch-button {
96+
color: white;
97+
background: red;
98+
border: white 2px solid;
99+
border-radius: 50%;
100+
padding: 20px;
101+
margin-top: 20px;
102+
}
103+
104+
.launch-button:enabled:hover {
105+
border: yellow 2px solid;
106+
}
107+
108+
.launch-button:enabled:active {
109+
color: black;
110+
background: yellow;
111+
}

0 commit comments

Comments
 (0)