Page navigation and high score functionality working

Author: jamesqquick

ReadMe.md

@@ -4,4 +4,4 @@ ES6 Features (arrow functions, spread operator, const and let)
 
 JavaScript - array functions (splice, map, sort), localStorage, fetch API
 
-CSS - flexbox
+CSS - flexbox, transitions,

app.css

@@ -1,12 +1,18 @@
 /* Resets */
-body,
-html {
-  margin: 0;
-  padding: 0;
-}
 * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+/* TEXT */
+h1,
+h2,
+h3,
+h4 {
+  margin-bottom: 10px;
 }
 
 /* Utilities */
@@ -24,35 +30,18 @@ html {
 .container > * {
   width: 100%;
 }
-.full {
-  height: 100vh;
-  width: 100vw;
-  padding: 4rem;
-}
 
 .flex-column {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .flex-center {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-box-align: center;
-
-  -ms-flex-align: center;
   align-items: center;
 }
 
 .justify-center {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -69,121 +58,6 @@ html {
   position: relative;
 }
 
-/* GAME */
-
-.question {
-  text-align: center;
-}
-
-.choice-container {
-  display: flex;
-  margin-bottom: 5px;
-  border: 1px solid black;
-}
-
-.choice-prefix {
-  font-size: 18px;
-  margin: 0;
-  padding: 15px 0;
-  width: 50px;
-  text-align: center;
-  border-right: 1px solid black;
-}
-
-.choice {
-  flex-grow: 1;
-  font-size: 18px;
-  margin: 0;
-  padding: 15px;
-}
-
-.choice-container:hover {
-  -webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
-  -webkit-transform: translateY(-2px);
-  transform: translateY(-2px);
-  -webkit-transition: -webkit-transform 150ms;
-  transition: -webkit-transform 150ms;
-  transition: transform 150ms;
-  transition: transform 150ms, -webkit-transform 150ms;
-  cursor: pointer;
-}
-
-.correct {
-  -webkit-animation: correct 1s;
-  animation: correct 1s;
-}
-
-.incorrect {
-  -webkit-animation: incorrect 750ms;
-  animation: incorrect 750ms;
-}
-
-#hud {
-  display: flex;
-  justify-content: space-between;
-}
-
-@-webkit-keyframes correct {
-  0% {
-    border-color: green;
-    background-color: green;
-  }
-  25% {
-    border-color: green;
-    background-color: green;
-  }
-  100% {
-    border-color: black;
-    background-color: white;
-  }
-}
-
-@keyframes correct {
-  0% {
-    border-color: green;
-    background-color: green;
-  }
-  25% {
-    border-color: green;
-    background-color: green;
-  }
-  100% {
-    border-color: black;
-    background-color: white;
-  }
-}
-
-@-webkit-keyframes incorrect {
-  0% {
-    border-color: red;
-    background-color: red;
-  }
-  25% {
-    border-color: red;
-    background-color: red;
-  }
-  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;
-  }
-}
-
 /* FORMS */
 
 form {
@@ -207,33 +81,33 @@ select {
 select {
   display: block;
 }
-button {
+.btn {
   font-size: 16px;
-  height: 40px;
+  padding: 10px 0;
   width: 200px;
+  text-align: center;
   border: 1px solid black;
   margin-bottom: 10px;
+  text-decoration: none;
+  color: black;
 }
 
-button:hover {
+.btn:hover {
   cursor: pointer;
-  -webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
   box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
-  -webkit-transform: translateY(-2px);
   transform: translateY(-2px);
-  -webkit-transition: -webkit-transform 150ms;
   transition: -webkit-transform 150ms;
   transition: transform 150ms;
   transition: transform 150ms, -webkit-transform 150ms;
 }
 
-button[disabled] {
+.btn[disabled] {
   color: white;
   background: grey;
   border: none;
 }
 
-button[disabled]:hover {
+.btn[disabled]:hover {
   cursor: not-allowed;
   box-shadow: none;
   transform: none;

app.js

@@ -1,62 +1,3 @@
-// BUTTONS
-const highScoresBtn = document.getElementById("highScoresBtn");
-const saveScoreBtn = document.getElementById("saveScoreBtn");
-
-//INPUT
-const usernameInput = document.getElementById("username");
-
-//PAGE
-const pages = Array.from(document.getElementsByClassName("page"));
-
-//GAME Elements
-const question = document.getElementById("question");
-const choices = Array.from(document.getElementsByClassName("choice"));
-const scoreText = document.getElementById("score");
-const questionCounterText = document.getElementById("questionCounter");
-
-const CORRECT_BONUS = 10;
-const MAX_QUESTIONS = 5;
-
-let currentQuestion = {};
-let acceptingAnswers = true;
-let score = 0;
-let questionCounter = 0;
-let availableQuestions = [];
-//TODO: load form json file
-let questions = [
-  {
-    question: "What is the answer to question 1?",
-    choice1: "Choice Choice 1",
-    choice2: "Choice Choice 2",
-    choice3: "Choice Choice 3",
-    choice4: "Choice Choice 4",
-    answer: 1
-  },
-  {
-    question: "What is the answer to question 2?",
-    choice1: "Choice Choice 1",
-    choice2: "Choice Choice 2",
-    choice3: "Choice Choice 3",
-    choice4: "Choice Choice 4",
-    answer: 2
-  },
-  {
-    question: "What is the answer to question 3?",
-    choice1: "Choice Choice 1",
-    choice2: "Choice Choice 2",
-    choice3: "Choice Choice 3",
-    choice4: "Choice Choice 4",
-    answer: 4
-  }
-];
-
-//End Screen Elements
-const finalScore = document.getElementById("finalScore");
-
-//High Score Elements
-const highScoresList = document.getElementById("highScoresList");
-const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
-
 //Simulated Navigation
 navigateTo = pageName => {
   pages.forEach(page => {
@@ -68,101 +9,6 @@ navigateTo = pageName => {
   });
 };
 
-//GAME Functions
-
-playGame = () => {
-  startGame();
-  navigateTo("game");
-};
-
-startGame = () => {
-  questionCounter = 0;
-  score = 0;
-  availableQuestions = [...questions];
-  getNewQuestion();
-};
-
-getNewQuestion = () => {
-  if (availableQuestions.length === 0) {
-    //set final score text
-    finalScore.innerHTML = score;
-    //Go to the end page
-    return navigateTo("end");
-  }
-  questionCounter++;
-  questionCounterText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
-  const questionIndex = Math.floor(Math.random() * availableQuestions.length);
-  currentQuestion = availableQuestions[questionIndex];
-  question.innerHTML = currentQuestion.question;
-
-  choices.forEach(choice => {
-    const number = choice.dataset["number"];
-    choice.innerHTML = currentQuestion["choice" + number];
-  });
-
-  //Remove question from available questions
-  availableQuestions.splice(questionIndex, 1);
-
-  //let users answer now that question is ready
-  acceptingAnswers = true;
-};
-
-choices.forEach(choice => {
-  choice.addEventListener("click", e => {
-    //dont let the user attempt to answer until the new question is ready
-    if (!acceptingAnswers) return;
-    acceptingAnswers = false;
-    const selectedChoice = e.target;
-    const selectedAnswer = selectedChoice.dataset["number"];
-
-    const classToApply =
-      selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
-
-    //Add the correct/incorrect animation
-
-    selectedChoice.parentElement.classList.add(classToApply);
-
-    //Increase the score
-    incrementScore(classToApply === "correct" ? CORRECT_BONUS : 0);
-
-    setTimeout(() => {
-      selectedChoice.parentElement.classList.remove(classToApply);
-      //Load New Question
-      getNewQuestion();
-    }, 1000);
-  });
-});
-
-incrementScore = num => {
-  score += num;
-  scoreText.innerHTML = "Score: " + score;
-};
-
-//HIGH SCORES
-
-showHighScores = () => {
-  highScoresList.innerHTML = highScores
-    .map(
-      highScore =>
-        `<li class="high-score">${highScore.username} - ${highScore.score}</li>`
-    )
-    .join("");
-  navigateTo("highScores");
-};
-
-saveHighScore = () => {
-  //add the score, sort the array, and splice off starting at position 5
-  highScores.push({ score, 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));
-};
-
-usernameInput.addEventListener("keyup", () => {
-  saveScoreBtn.disabled = !usernameInput.value;
-});
-
 //saves score if appropriate in array of top 5 scores
 // saveHighScore = () => {
 //make a copy of existing scores