Skip to content

Commit dbf8d18

Browse files
jamesqquickjamesqquick
committed
Page navigation and high score functionality working
1 parent 54d2c0e commit dbf8d18

File tree

6 files changed

+158
-0
lines changed

6 files changed

+158
-0
lines changed

‎end.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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</title>
8+
<link rel="stylesheet" href="app.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div id="end" class="flex-center flex-column">
14+
<h1 class="text-center">Great Job!</h1>
15+
<h2 id="finalScore">100</h2>
16+
<a class="btn" href="/">Go Home</a>
17+
<form>
18+
<label for="username">Username</label>
19+
<input type="text" name="username" id="username" />
20+
<button
21+
class="btn"
22+
type="submit"
23+
id="saveScoreBtn"
24+
onclick="saveHighScore(event)"
25+
disabled
26+
>
27+
Save
28+
</button>
29+
</form>
30+
</div>
31+
</div>
32+
<script src="end.js"></script>
33+
</body>
34+
</html>

‎end.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const finalScore = document.getElementById("finalScore");
2+
const usernameInput = document.getElementById("username");
3+
const saveScoreBtn = document.getElementById("saveScoreBtn");
4+
const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
5+
const mostRecentScore = localStorage.getItem("mostRecentScore");
6+
//load mostRecentScore from localStorage
7+
//TODO: navigate home if no previous score
8+
finalScore.innerText = localStorage.getItem("mostRecentScore");
9+
10+
saveHighScore = e => {
11+
console.log("save high score");
12+
e.preventDefault();
13+
//add the score, sort the array, and splice off starting at position 5
14+
highScores.push({ mostRecentScore, username: usernameInput.value });
15+
highScores.sort((a, b) => b.score - a.score);
16+
highScores.splice(5);
17+
//Save to local storage for next time
18+
localStorage.setItem("highScores", JSON.stringify(highScores));
19+
20+
//Go home
21+
window.location.assign("/");
22+
};
23+
24+
usernameInput.addEventListener("keyup", () => {
25+
saveScoreBtn.disabled = !usernameInput.value;
26+
});

‎game.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* GAME */
2+
.choice-container {
3+
display: flex;
4+
margin-bottom: 5px;
5+
width: 100% !important;
6+
}
7+
8+
.choice-prefix {
9+
padding: 5px 0;
10+
width: 50px;
11+
text-align: center;
12+
border-right: 1px solid black;
13+
}
14+
15+
.choice {
16+
padding: 5px 0;
17+
flex-grow: 1;
18+
}
19+
20+
.correct {
21+
animation: correct 1s;
22+
}
23+
24+
.incorrect {
25+
animation: incorrect 750ms;
26+
}
27+
28+
#hud {
29+
display: flex;
30+
justify-content: space-between;
31+
}
32+
33+
@keyframes correct {
34+
0% {
35+
border-color: green;
36+
background-color: green;
37+
}
38+
25% {
39+
border-color: green;
40+
background-color: green;
41+
}
42+
100% {
43+
border-color: black;
44+
background-color: white;
45+
}
46+
}
47+
48+
@keyframes incorrect {
49+
0% {
50+
border-color: red;
51+
background-color: red;
52+
}
53+
25% {
54+
border-color: red;
55+
background-color: red;
56+
}
57+
100% {
58+
border-color: black;
59+
background-color: white;
60+
}
61+
}

‎highscores.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* High Scores */
2+
3+
#highScoresList {
4+
padding-left: 0;
5+
list-style: none;
6+
}

‎highscores.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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</title>
8+
<link rel="stylesheet" href="app.css" />
9+
<link rel="stylesheet" href="highscores.css" />
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div id="highScores" class="flex-center flex-column">
15+
<h1 id="finalScore">High Scores</h1>
16+
<ul id="highScoresList"></ul>
17+
<a class="btn" href="/">Go Home</a>
18+
</div>
19+
</div>
20+
<script src="highScores.js"></script>
21+
</body>
22+
</html>

‎highscores.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const highScoresList = document.getElementById("highScoresList");
2+
const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
3+
console.log(highScores);
4+
highScoresList.innerHTML = highScores
5+
.map(
6+
highScore =>
7+
`<li class="high-score">${highScore.username} - ${highScore.score}</li>`
8+
)
9+
.join("");

0 commit comments

Comments
 (0)