Detect spelling errors by matching strings

- The app we're building is a typing speed test, but typing speed is no good without accuracy so we're going to test for accuracy at the same time. What I'm going to do here is match the text that's being input into the test area with the text directly above. If the text is correct we'll have a blue line around the test area if a mistake is made the line turns orange and when the text matches exactly the text above so the test is complete, it'll turn green. The challenge here is as we're typing in content in this test area we need to match the shortened version of the content to a shortened version of the string above.

If we try to test it to the entire string it'll always be incorrect until the entire string has been typed up. We've already started this process in the spell check function so here we have the let textEntered which is the textArea.value. That is what is currently sitting inside the testArea. The next thing we need to do is grab the originText which sits in a constant called originText and place it inside a new variable and then truncate it. So I'll set up a new variable called originTextMatch and I'll set that equal to originText and here I'll use the substring method.

Substring treats a string of text as an array and allows us to specify a section within the text to pull out and use as a substring. It takes two arguments, where in the array we want to start, which in this case is zero to start, and how many characters we want returned. We already know how many characters because we have textEntered up here and we just want the same amount of characters as textEntered, so I'll just say textEntered dot length.

This gives us the length property and as a result we should now have two equal length strings. That means we can now test to see if the string inside the test area matches the string outside the test area. Here we'll first test to see if the string inside the test area matches the originText in total because in that case we're done with the test. So if textEntered double equals originText in that case we take testWrapper, that's the wrapper that's going around the test area that is currently grey, we'll set its style property and the border color to a green color.

If this condition is not true we need to test whether textEntered matches originTextMatch. So else then if textEntered double equals originTextMatch, this is the shorter string, and again, we'll grab testWrapper border color and if this is true we set it to a blue color. 65CCF3 And if it's false we set it to an orange color.

Finally, I'll just take away this console log 'cause we don't need it anymore, save and now we can test it in the browser. So if I type in a string that matches we should see a blue outline, but if I make a mistake it should turn orange and I can go back and fix it, and if I match the strings exactly it turns green. At this point the test should stop, we haven't gotten that far yet, but at least now the color feedback works properly, and as you can see it's very easy for a tester to know exactly what's going on here.

Good, that means we can move on.