Typing game with Javascript

YvonneDev
4 min readDec 26, 2020

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 placed 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

--

--

YvonneDev

❤️Front-end Web Development self-taught *share what I learned*