diff --git a/Final/app.css b/Final/app.css deleted file mode 100644 index 7d3c2a0..0000000 --- a/Final/app.css +++ /dev/null @@ -1,127 +0,0 @@ -:root { - background-color: #ecf5ff; - font-size: 62.5%; -} - -* { - box-sizing: border-box; - font-family: Arial, Helvetica, sans-serif; - margin: 0; - padding: 0; - color: #333; -} - -h1, -h2, -h3, -h4 { - margin-bottom: 1rem; -} - -h1 { - font-size: 5.4rem; - color: #56a5eb; - margin-bottom: 5rem; -} - -h1 > span { - font-size: 2.4rem; - font-weight: 500; -} - -h2 { - font-size: 4.2rem; - margin-bottom: 4rem; - font-weight: 700; -} - -h3 { - font-size: 2.8rem; - font-weight: 500; -} - -/* UTILITIES */ - -.container { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - max-width: 80rem; - margin: 0 auto; - padding: 2rem; -} - -.container > * { - width: 100%; -} - -.flex-column { - display: flex; - flex-direction: column; -} - -.flex-center { - justify-content: center; - align-items: center; -} - -.justify-center { - justify-content: center; -} - -.text-center { - text-align: center; -} - -.hidden { - display: none; -} - -/* BUTTONS */ -.btn { - font-size: 1.8rem; - padding: 1rem 0; - width: 20rem; - text-align: center; - border: 0.1rem solid #56a5eb; - margin-bottom: 1rem; - text-decoration: none; - color: #56a5eb; - background-color: white; -} - -.btn:hover { - cursor: pointer; - box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); - transform: translateY(-0.1rem); - transition: transform 150ms; -} - -.btn[disabled]:hover { - cursor: not-allowed; - box-shadow: none; - transform: none; -} - -/* FORMS */ -form { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; -} - -input { - margin-bottom: 1rem; - width: 20rem; - padding: 1.5rem; - font-size: 1.8rem; - border: none; - box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5); -} - -input::placeholder { - color: #aaa; -} diff --git a/Final/end.html b/Final/end.html deleted file mode 100644 index 1ec5659..0000000 --- a/Final/end.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - Congrats! - - - -
-
-

-
- - -
- Play Again - Go Home -
-
- - - diff --git a/Final/end.js b/Final/end.js deleted file mode 100644 index 284babd..0000000 --- a/Final/end.js +++ /dev/null @@ -1,30 +0,0 @@ -const username = document.getElementById("username"); -const saveScoreBtn = document.getElementById("saveScoreBtn"); -const finalScore = document.getElementById("finalScore"); -const mostRecentScore = localStorage.getItem("mostRecentScore"); - -const highScores = JSON.parse(localStorage.getItem("highScores")) || []; - -const MAX_HIGH_SCORES = 5; - -finalScore.innerText = mostRecentScore; - -username.addEventListener("keyup", () => { - saveScoreBtn.disabled = !username.value; -}); - -saveHighScore = e => { - console.log("clicked the save button!"); - e.preventDefault(); - - const score = { - score: mostRecentScore, - name: username.value - }; - highScores.push(score); - highScores.sort((a, b) => b.score - a.score); - highScores.splice(5); - - localStorage.setItem("highScores", JSON.stringify(highScores)); - window.location.assign("/"); -}; diff --git a/Final/game.css b/Final/game.css deleted file mode 100644 index 9a80ecc..0000000 --- a/Final/game.css +++ /dev/null @@ -1,82 +0,0 @@ -.choice-container { - display: flex; - margin-bottom: 0.5rem; - width: 100%; - font-size: 1.8rem; - border: 0.1rem solid rgb(86, 165, 235, 0.25); - background-color: white; -} - -.choice-container:hover { - cursor: pointer; - box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); - transform: translateY(-0.1rem); - transition: transform 150ms; -} - -.choice-prefix { - padding: 1.5rem 2.5rem; - background-color: #56a5eb; - color: white; -} - -.choice-text { - padding: 1.5rem; - width: 100%; -} - -.correct { - background-color: #28a745; -} - -.incorrect { - background-color: #dc3545; -} - -/* HUD */ - -#hud { - display: flex; - justify-content: space-between; -} - -.hud-prefix { - text-align: center; - font-size: 2rem; -} - -.hud-main-text { - text-align: center; -} - -#progressBar { - width: 20rem; - height: 4rem; - border: 0.3rem solid #56a5eb; - margin-top: 1.5rem; -} - -#progressBarFull { - height: 3.4rem; - background-color: #56a5eb; - width: 0%; -} - -/* LOADER */ -#loader { - border: 1.6rem solid white; - border-radius: 50%; - border-top: 1.6rem solid #56a5eb; - width: 12rem; - height: 12rem; - animation: spin 2s linear infinite; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/Final/game.html b/Final/game.html deleted file mode 100644 index 039e272..0000000 --- a/Final/game.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - Quick Quiz - Play - - - - -
-
- -
- - - diff --git a/Final/game.js b/Final/game.js deleted file mode 100644 index 20afdd7..0000000 --- a/Final/game.js +++ /dev/null @@ -1,132 +0,0 @@ -const question = document.getElementById("question"); -const choices = Array.from(document.getElementsByClassName("choice-text")); -const progressText = document.getElementById("progressText"); -const scoreText = document.getElementById("score"); -const progressBarFull = document.getElementById("progressBarFull"); -const loader = document.getElementById("loader"); -const game = document.getElementById("game"); -let currentQuestion = {}; -let acceptingAnswers = false; -let score = 0; -let questionCounter = 0; -let availableQuesions = []; - -let questions = []; - -//Replace HTML Entities with appropriate string -function unescapeHtml(safe) { - return safe.replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>') - .replace(/"/g, '"') - .replace(/“/g, '\“') - .replace(/”/g, '\”') - .replace(/‘/g, '\'') - .replace(/’/g, '\'') - .replace(/…/g, '…') - .replace(/‎/g, '') - .replace(/ó/g, 'ó') - .replace(/É/g, 'É') - .replace(/­/g, "-") - .replace(/'/g, "'"); -} - -fetch( - "https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple" -) - .then(res => { - return res.json(); - }) - .then(loadedQuestions => { - console.log(loadedQuestions.results); - questions = loadedQuestions.results.map(loadedQuestion => { - const formattedQuestion = { - question: unescapeHtml(loadedQuestion.question) - }; - - const answerChoices = [...loadedQuestion.incorrect_answers]; - formattedQuestion.answer = Math.floor(Math.random() * 3) + 1; - answerChoices.splice( - formattedQuestion.answer - 1, - 0, - loadedQuestion.correct_answer - ); - - answerChoices.forEach((choice, index) => { - formattedQuestion["choice" + (index + 1)] = unescapeHtml(choice); - }); - - return formattedQuestion; - }); - - startGame(); - }) - .catch(err => { - console.error(err); - }); - -//CONSTANTS -const CORRECT_BONUS = 10; -const MAX_QUESTIONS = 3; - -startGame = () => { - questionCounter = 0; - score = 0; - availableQuesions = [...questions]; - getNewQuestion(); - game.classList.remove("hidden"); - loader.classList.add("hidden"); -}; - -getNewQuestion = () => { - if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { - localStorage.setItem("mostRecentScore", score); - //go to the end page - return window.location.assign("/end.html"); - } - questionCounter++; - progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; - //Update the progress bar - progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; - - const questionIndex = Math.floor(Math.random() * availableQuesions.length); - currentQuestion = availableQuesions[questionIndex]; - question.innerText = currentQuestion.question; - - choices.forEach(choice => { - const number = choice.dataset["number"]; - choice.innerText = currentQuestion["choice" + number]; - }); - - availableQuesions.splice(questionIndex, 1); - acceptingAnswers = true; -}; - -choices.forEach(choice => { - choice.addEventListener("click", e => { - if (!acceptingAnswers) return; - - acceptingAnswers = false; - const selectedChoice = e.target; - const selectedAnswer = selectedChoice.dataset["number"]; - - const classToApply = - selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; - - if (classToApply === "correct") { - incrementScore(CORRECT_BONUS); - } - - selectedChoice.parentElement.classList.add(classToApply); - - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 1000); - }); -}); - -incrementScore = num => { - score += num; - scoreText.innerText = score; -}; diff --git a/Final/highscores.css b/Final/highscores.css deleted file mode 100644 index b69893d..0000000 --- a/Final/highscores.css +++ /dev/null @@ -1,14 +0,0 @@ -#highScoresList { - list-style: none; - padding-left: 0; - margin-bottom: 4rem; -} - -.high-score { - font-size: 2.8rem; - margin-bottom: 0.5rem; -} - -.high-score:hover { - transform: scale(1.025); -} diff --git a/Final/highscores.html b/Final/highscores.html deleted file mode 100644 index 2f81ba8..0000000 --- a/Final/highscores.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - High Scores - - - - -
-
-

High Scores

- - Go Home -
-
- - - diff --git a/Final/highscores.js b/Final/highscores.js deleted file mode 100644 index 860feee..0000000 --- a/Final/highscores.js +++ /dev/null @@ -1,8 +0,0 @@ -const highScoresList = document.getElementById("highScoresList"); -const highScores = JSON.parse(localStorage.getItem("highScores")) || []; - -highScoresList.innerHTML = highScores - .map(score => { - return `
  • ${score.name} - ${score.score}
    • `; - }) - .join(""); diff --git a/Final/index.html b/Final/index.html deleted file mode 100644 index fb1c219..0000000 --- a/Final/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Quick Quiz - - - -
    -
    -

    Quick Quiz

    - Play - High Scores -
    -
    - - diff --git a/Final/questions.json b/Final/questions.json deleted file mode 100644 index 6988ecd..0000000 --- a/Final/questions.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "question": "Inside which HTML element do we put the JavaScript??", - "choice1": "