Sports Trivia

Sports trivia app that is built with modern javascript, css3, html5, local storage

Click here to play!

Take Aways

Create a Top 5 Scores in local storage

PUSH: Inside of the saveHighScore function, create a score object and push the new score to the highScores array.

const score = {
    score: mostRecentScore,
    name: username.value
};
highScores.push(score);
}

SORT: Passing the arrow function (a, b) => b - a tells .sort() to sort in ascending order.

.sort((a,b) => b.score - a.score);

SPLICE: Splicing at the 5th index cuts off all other scores after the 5th number.

highScores.splice(5);

UPDATE: setItem takes in a keyName and a keyValue. Since localStorage only operates with strings, you have to use JSON.stringify to change the score to a string.

localStorage.setItem("highscores", JSON.stringify(highScores));

CSS

I chose not to use Bootstrap for this project and focus more attention to CSS3. Some of my functions might have taken longer than I would have liked, but I learned how to create a progress bar with Javascript and CSS.

I created progressBarFull inside the progressBar parent div. By taking the questionCounter dividing by the MAX_QUESTIONS and multiplying it by 100, I am able to dynamically change the width of the progressBarFull. This is cool, because as I add more and more questions, I don't have to adjust the bar as I would if I had just hard coded the progress bar.

progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;

Spinning Loader

This was a fun challenge. All in the CSS file, I used the CSS to style the loader and the @keyframe & animation tags to make the loader spin.

animation: spin 2s linear infinite;

I created a border then add animation linear infine so that it makes a loop every 2 seconds. Using the @keyframe spin tag allows you take control how full of a rotation it can make.

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}