Page navigation and high score functionality working

jamesqquick · Jan 26, 2019 · dbf8d18 · dbf8d18
1 parent 54d2c0e
commit dbf8d18
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 0 deletions.
diff --git a/end.html b/end.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Quick Quiz</title>
+    <link rel="stylesheet" href="app.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="end" class="flex-center flex-column">
+        <h1 class="text-center">Great Job!</h1>
+        <h2 id="finalScore">100</h2>
+        <a class="btn" href="/">Go Home</a>
+        <form>
+          <label for="username">Username</label>
+          <input type="text" name="username" id="username" />
+          <button
+            class="btn"
+            type="submit"
+            id="saveScoreBtn"
+            onclick="saveHighScore(event)"
+            disabled
+          >
+            Save
+          </button>
+        </form>
+      </div>
+    </div>
+    <script src="end.js"></script>
+  </body>
+</html>
diff --git a/end.js b/end.js
@@ -0,0 +1,26 @@
+const finalScore = document.getElementById("finalScore");
+const usernameInput = document.getElementById("username");
+const saveScoreBtn = document.getElementById("saveScoreBtn");
+const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
+const mostRecentScore = localStorage.getItem("mostRecentScore");
+//load mostRecentScore from localStorage
+//TODO: navigate home if no previous score
+finalScore.innerText = localStorage.getItem("mostRecentScore");
+
+saveHighScore = e => {
+  console.log("save high score");
+  e.preventDefault();
+  //add the score, sort the array, and splice off starting at position 5
+  highScores.push({ mostRecentScore, username: usernameInput.value });
+  highScores.sort((a, b) => b.score - a.score);
+  highScores.splice(5);
+  //Save to local storage for next time
+  localStorage.setItem("highScores", JSON.stringify(highScores));
+
+  //Go home
+  window.location.assign("/");
+};
+
+usernameInput.addEventListener("keyup", () => {
+  saveScoreBtn.disabled = !usernameInput.value;
+});
diff --git a/game.css b/game.css
@@ -0,0 +1,61 @@
+/* GAME */
+.choice-container {
+  display: flex;
+  margin-bottom: 5px;
+  width: 100% !important;
+}
+
+.choice-prefix {
+  padding: 5px 0;
+  width: 50px;
+  text-align: center;
+  border-right: 1px solid black;
+}
+
+.choice {
+  padding: 5px 0;
+  flex-grow: 1;
+}
+
+.correct {
+  animation: correct 1s;
+}
+
+.incorrect {
+  animation: incorrect 750ms;
+}
+
+#hud {
+  display: flex;
+  justify-content: space-between;
+}
+
+@keyframes correct {
+  0% {
+    border-color: green;
+    background-color: green;
+  }
+  25% {
+    border-color: green;
+    background-color: green;
+  }
+  100% {
+    border-color: black;
+    background-color: white;
+  }
+}
+
+@keyframes incorrect {
+  0% {
+    border-color: red;
+    background-color: red;
+  }
+  25% {
+    border-color: red;
+    background-color: red;
+  }
+  100% {
+    border-color: black;
+    background-color: white;
+  }
+}
diff --git a/highscores.css b/highscores.css
@@ -0,0 +1,6 @@
+/* High Scores */
+
+#highScoresList {
+  padding-left: 0;
+  list-style: none;
+}
diff --git a/highscores.html b/highscores.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Quick Quiz</title>
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="highscores.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="highScores" class="flex-center flex-column">
+        <h1 id="finalScore">High Scores</h1>
+        <ul id="highScoresList"></ul>
+        <a class="btn" href="/">Go Home</a>
+      </div>
+    </div>
+    <script src="highScores.js"></script>
+  </body>
+</html>
diff --git a/highscores.js b/highscores.js
@@ -0,0 +1,9 @@
+const highScoresList = document.getElementById("highScoresList");
+const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
+console.log(highScores);
+highScoresList.innerHTML = highScores
+  .map(
+    highScore =>
+      `<li class="high-score">${highScore.username} - ${highScore.score}</li>`
+  )
+  .join("");