Creating full-featured typing game is not so easy. I had to do a lot of research about the topic.

• First, I had to find a way to track the user's types and check if they are correct.
• Second, I had to find a way to generate random words and move caret's position.
• Third, I had to find a way to calculate the user's typing speed and accuracy.
• Finally, I had to find a way to make the game look good and be user-friendly.

Here you can see the wireframe I drew.

I used all Bootstrap features to make the website look good and be user-friendly.

• I chose to use Bootstrap 5's dark theme for the website.
• I also used grid and flexbox systems to make the website responsive.
• I added prebuilt components such as navbar, buttons, carousel, accordion, and cards.

I used all my creativity to make the website look good and be user-friendly. Staring from the topic of the website, ending with the font family and content.

I implemented various functionalities such as the moving caret, word list generation, and other essential features, contributing significantly to the game's interactive elements. Most of the code was crafted using pure JavaScript.
I also did animations at Home page using pure JavaScript. Typing effect uses simple setTimeout and setInterval functions. The rest of the animations use DOM events and CSS classes.
Full-featured music player and YouTube video player controller were implemented using pure JavaScript.

I used jQuery to select elements, add event listeners, change CSS properties, add animations.
Basically, the Game page is built using jQuery, excepting the music player.
Of course, I could have done it using pure JavaScript, but it would take more time. jQuery is a great tool to simplify the code and make it more readable, especially for big and complex pages logic.

Finally, I successfully published the finalized website on GitHub Pages. You can check it out here.