How to develop typing speed test tool for online?

Hey there, I am learning coder. I want to develop my typing speed test online tool that can help you to test your typing speed type. How can I?

I need help with

  1. How the tool will calculate wpm
  2. How the typed misspelled word will be highlighted.

You can take wpmtest.org as an example.

You can suggest me any sources or basics. I want to develop the tool for practice purpose so that I can have wightage on my resume.

Difficult to give any advice without knowing where your skills are located at the moment.

How the tool will calculate wpm

This is rather a (simple) math problem than a coding problem. wpm is “words per minute”, so “number of words divided by number of minutes”.

How the typed misspelled word will be highlighted.

You can inspect the code of the game that you linked (press F12 in Chrome/Firefox for example). Each word that appears on the left side is wrapped by a <span>, and some of those spans have a class of “correct-word”. This is dynamically added with JavaScript as the user types. Then in CSS, you’d use that selector .correct-word and give it a green text color.

There’s tons of ways to build such a game. Plain HTML/CSS/JavaScript, or using a frontend library like React, are just two examples.

I inspected the code can you help me with the image I give below

I am familiar with CSS and java script.

Have you ever built a web page before? I’m not sure if you can write such a game with no experience, but anyway - the developer tools will be your best friend when you start building your own pages, so it’s a good idea to get familiar with it as soon as possible.

In your screenshot, the left side shows the structure of the HTML, and to the right, you see the CSS styles. The currently selected element is the <body>, so the CSS window shows you the styles for the body.

Click on the arrow in the upper left (left of the word “Inspector”), then click on one of the words on the page. The HTML window will select the <span> that wraps the word now, and the CSS window will show the styles that are applied.

Here’s a screenshot from Chrome’s developer tools (they’re almost exactly the same in Firefox):

You see the <div id="word-section">, it contains a <span> for each word. Some have a class of correct-word-c, incorrect-word-c, current-word and so on. In the CSS window, you see that everything with a class of .correct-word-c has a color set to some light green.

While the user types, JavaScript listens for the user input, and decides which class to give to each span.

Hope that gives a little general overview. If you want to write something like this with HTML/CSS/JS, you’ll need to know about JavaScript DOM manipulation (there’s lots of tutorials, both in blog articles or on YT).

Yes. I am just learning coder as mentioned. I am learning and beginner. I am just trying to build one program no matter how long does it take.

Hence I asked for some sources or links where I can learn building web tools.

Thank you for your help and replies. I am trying your solution. I will contact you again or will ask your for help again. Really thank your for your replies.

You need more JavaScript knowledge, it could be with vanilla JavaScript or with a framework like React, you could continue the fcc curriculum to learn more things

The best place to start with HTML/CSS/JS is freeCodeCamp, but I’d check out other resources as well. Here’s a tutorial how to build something very similar to the word typing game you linked:

The game and source code on Codepen:

There’s very little HTML involved, it’s all done with JavaScript. You could read through the code, or watch the video and code along with it, and do additional research whenever you come across something you don’t understand. In any case, it’ll give you a good impression of what you already know and what you need to learn.

Thank you for the source. I am currently learning from this and found helpful for me. Actually I was little familiar with HTML and CSS but I realize that java script is very essential.

Yes I can troubleshoot some little problems I come across. I know to solve some query. :grinning: Thank you :blush:.