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.
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.
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: