Typing game with Javascript

 

course from Brad Traversy

Github code

Features:

localStorage get and set

setting difficulty selects

matching words

score add when correct

time reduces and the time add if typing correctly(time depends on difficulty level)

HTML

button controls the setting section at the top

the setting is a form with three selections

the word data will be shown in the h1 tag

the text input compare to the word when the user types

time on the left, score on the right

and when the game end, the message shows up with the score and a reset button

CSS

hide the arrow on the select with appearance, for other browser adding the -webkit and -moz

When focusing on select, hiding the outline

the setting places at the top. when hiding, the position of the y-axis moves up

the messager box show at the absolute position relative to the container and hide first. when the game ends, show up

JS

select all the DOM needed with id

the words array or can be fetched from API

the initial score is zero, and the time is 10 seconds

get the difficulty from localStorage if have inside or set to medium and also show in the select

When loading the page, the mouse focus on the input right away

get a random word from the words array list with Math.random()

When typing in the text, the value of texting compares to the word shown in the DOM. If they match completely, it's time to get a new word and update the score and time.

check the difficulty level before running the updateTime function

show the random word in the DOM.

and initially load the function 

if the words match, the score adds one and show in the score DOM

Meanwhile, the time decreases every second with setInterval

When the time reaches zero, which mean the time is ended, the gameOver function is running

create the DOM in the endgame messager box and show up the score

turn the display from none to flex

when clicking the setting button, the setting section at the top toggle hide.

When selecting the form difficulty level, store in the difficult and also set in the localStorage