Skip to content

Commit ae4c09a

Browse files
krishna16sharmakrishna16sharma
authored
Fixed minor issues.
Updated line 21 of end.js to store actual score instead of a random score. Updated game.js to show the corresponding string of various HTML entities (like ") in the loaded question and choice.
1 parent 92a5b3d commit ae4c09a

File tree

11 files changed

+550
-0
lines changed

11 files changed

+550
-0
lines changed

‎Final/app.css

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
:root {
2+
background-color: #ecf5ff;
3+
font-size: 62.5%;
4+
}
5+
6+
* {
7+
box-sizing: border-box;
8+
font-family: Arial, Helvetica, sans-serif;
9+
margin: 0;
10+
padding: 0;
11+
color: #333;
12+
}
13+
14+
h1,
15+
h2,
16+
h3,
17+
h4 {
18+
margin-bottom: 1rem;
19+
}
20+
21+
h1 {
22+
font-size: 5.4rem;
23+
color: #56a5eb;
24+
margin-bottom: 5rem;
25+
}
26+
27+
h1 > span {
28+
font-size: 2.4rem;
29+
font-weight: 500;
30+
}
31+
32+
h2 {
33+
font-size: 4.2rem;
34+
margin-bottom: 4rem;
35+
font-weight: 700;
36+
}
37+
38+
h3 {
39+
font-size: 2.8rem;
40+
font-weight: 500;
41+
}
42+
43+
/* UTILITIES */
44+
45+
.container {
46+
width: 100vw;
47+
height: 100vh;
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
max-width: 80rem;
52+
margin: 0 auto;
53+
padding: 2rem;
54+
}
55+
56+
.container > * {
57+
width: 100%;
58+
}
59+
60+
.flex-column {
61+
display: flex;
62+
flex-direction: column;
63+
}
64+
65+
.flex-center {
66+
justify-content: center;
67+
align-items: center;
68+
}
69+
70+
.justify-center {
71+
justify-content: center;
72+
}
73+
74+
.text-center {
75+
text-align: center;
76+
}
77+
78+
.hidden {
79+
display: none;
80+
}
81+
82+
/* BUTTONS */
83+
.btn {
84+
font-size: 1.8rem;
85+
padding: 1rem 0;
86+
width: 20rem;
87+
text-align: center;
88+
border: 0.1rem solid #56a5eb;
89+
margin-bottom: 1rem;
90+
text-decoration: none;
91+
color: #56a5eb;
92+
background-color: white;
93+
}
94+
95+
.btn:hover {
96+
cursor: pointer;
97+
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
98+
transform: translateY(-0.1rem);
99+
transition: transform 150ms;
100+
}
101+
102+
.btn[disabled]:hover {
103+
cursor: not-allowed;
104+
box-shadow: none;
105+
transform: none;
106+
}
107+
108+
/* FORMS */
109+
form {
110+
width: 100%;
111+
display: flex;
112+
flex-direction: column;
113+
align-items: center;
114+
}
115+
116+
input {
117+
margin-bottom: 1rem;
118+
width: 20rem;
119+
padding: 1.5rem;
120+
font-size: 1.8rem;
121+
border: none;
122+
box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123+
}
124+
125+
input::placeholder {
126+
color: #aaa;
127+
}

‎Final/end.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Congrats!</title>
8+
<link rel="stylesheet" href="app.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div id="end" class="flex-center flex-column">
13+
<h1 id="finalScore"></h1>
14+
<form>
15+
<input
16+
type="text"
17+
name="username"
18+
id="username"
19+
placeholder="username"
20+
/>
21+
<button
22+
type="submit"
23+
class="btn"
24+
id="saveScoreBtn"
25+
onclick="saveHighScore(event)"
26+
disabled
27+
>
28+
Save
29+
</button>
30+
</form>
31+
<a class="btn" href="/game.html">Play Again</a>
32+
<a class="btn" href="/">Go Home</a>
33+
</div>
34+
</div>
35+
<script src="end.js"></script>
36+
</body>
37+
</html>

‎Final/end.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const username = document.getElementById("username");
2+
const saveScoreBtn = document.getElementById("saveScoreBtn");
3+
const finalScore = document.getElementById("finalScore");
4+
const mostRecentScore = localStorage.getItem("mostRecentScore");
5+
6+
const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
7+
8+
const MAX_HIGH_SCORES = 5;
9+
10+
finalScore.innerText = mostRecentScore;
11+
12+
username.addEventListener("keyup", () => {
13+
saveScoreBtn.disabled = !username.value;
14+
});
15+
16+
saveHighScore = e => {
17+
console.log("clicked the save button!");
18+
e.preventDefault();
19+
20+
const score = {
21+
score: mostRecentScore,
22+
name: username.value
23+
};
24+
highScores.push(score);
25+
highScores.sort((a, b) => b.score - a.score);
26+
highScores.splice(5);
27+
28+
localStorage.setItem("highScores", JSON.stringify(highScores));
29+
window.location.assign("/");
30+
};

‎Final/game.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.choice-container {
2+
display: flex;
3+
margin-bottom: 0.5rem;
4+
width: 100%;
5+
font-size: 1.8rem;
6+
border: 0.1rem solid rgb(86, 165, 235, 0.25);
7+
background-color: white;
8+
}
9+
10+
.choice-container:hover {
11+
cursor: pointer;
12+
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13+
transform: translateY(-0.1rem);
14+
transition: transform 150ms;
15+
}
16+
17+
.choice-prefix {
18+
padding: 1.5rem 2.5rem;
19+
background-color: #56a5eb;
20+
color: white;
21+
}
22+
23+
.choice-text {
24+
padding: 1.5rem;
25+
width: 100%;
26+
}
27+
28+
.correct {
29+
background-color: #28a745;
30+
}
31+
32+
.incorrect {
33+
background-color: #dc3545;
34+
}
35+
36+
/* HUD */
37+
38+
#hud {
39+
display: flex;
40+
justify-content: space-between;
41+
}
42+
43+
.hud-prefix {
44+
text-align: center;
45+
font-size: 2rem;
46+
}
47+
48+
.hud-main-text {
49+
text-align: center;
50+
}
51+
52+
#progressBar {
53+
width: 20rem;
54+
height: 4rem;
55+
border: 0.3rem solid #56a5eb;
56+
margin-top: 1.5rem;
57+
}
58+
59+
#progressBarFull {
60+
height: 3.4rem;
61+
background-color: #56a5eb;
62+
width: 0%;
63+
}
64+
65+
/* LOADER */
66+
#loader {
67+
border: 1.6rem solid white;
68+
border-radius: 50%;
69+
border-top: 1.6rem solid #56a5eb;
70+
width: 12rem;
71+
height: 12rem;
72+
animation: spin 2s linear infinite;
73+
}
74+
75+
@keyframes spin {
76+
0% {
77+
transform: rotate(0deg);
78+
}
79+
100% {
80+
transform: rotate(360deg);
81+
}
82+
}

‎Final/game.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Quick Quiz - Play</title>
8+
<link rel="stylesheet" href="app.css" />
9+
<link rel="stylesheet" href="game.css" />
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div id="loader"></div>
14+
<div id="game" class="justify-center flex-column hidden">
15+
<div id="hud">
16+
<div id="hud-item">
17+
<p id="progressText" class="hud-prefix">
18+
Question
19+
</p>
20+
<div id="progressBar">
21+
<div id="progressBarFull"></div>
22+
</div>
23+
</div>
24+
<div id="hud-item">
25+
<p class="hud-prefix">
26+
Score
27+
</p>
28+
<h1 class="hud-main-text" id="score">
29+
0
30+
</h1>
31+
</div>
32+
</div>
33+
<h2 id="question"></h2>
34+
<div class="choice-container">
35+
<p class="choice-prefix">A</p>
36+
<p class="choice-text" data-number="1"></p>
37+
</div>
38+
<div class="choice-container">
39+
<p class="choice-prefix">B</p>
40+
<p class="choice-text" data-number="2"></p>
41+
</div>
42+
<div class="choice-container">
43+
<p class="choice-prefix">C</p>
44+
<p class="choice-text" data-number="3"></p>
45+
</div>
46+
<div class="choice-container">
47+
<p class="choice-prefix">D</p>
48+
<p class="choice-text" data-number="4"></p>
49+
</div>
50+
</div>
51+
</div>
52+
<script src="game.js"></script>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)