Typing speed test

The project is basically done now. I added better punctions and number generations with capitalization on words that comes after a word that ends with “. ! ?” etc. I worked on the mobile version aswell as the ReadME.

So i went a different route than i started the previous devlog with. Instead of rolling through new quotes and removing old ones from the DOM that caused alot of problems i decided to just scratch that idea and get a big list of words (got from monkeytype repo) and just generate some random words on the page and add punctuation and numbers option. Not perfect spawn rate for those yet but will improve it. On passsage mode i decided to keep the easy, medium and hard options for the quotes. If you think thats alot of changes for 30 mins you are right. I lost over 1 hour of work because of some bug that didnt let flavortown sync correctly with hackatime

i added a confetti animation when beating your high score. Also i added function that loads in new quote when you are about to reach the end of the current quote. IDK if its just my laptop being hella slow and bad but it had a lot of performance issues when it the quotes started to pile up so i had to solve that by creating a DOM cleanup function that just removes the spans that are out of view. Doing this made alot of problems and i had to work around them aswell as restructure my code. Right now the layout shifts when loading and unloading the quotes but i will hopefully fix that when i have the time.

Worked on the stats calculation a bit also added function that prevents you from going back with the backspace to a previous word. Basically if space is entered in its correct place it marks it as word completed and you cant go back beyond that point. The keypress is still measured in the accuracy calculation. Also i added personal best function that gets saved in localstorage. For that i added different overlays. One is standard test complete that pops up if nothing special happens. The other one pops up when you completed a test for the first time marking your baseline. The third one pops up when you beaten your best score.

Biggest change here is a test completed screen overlay that shows your stats in the end. The reason why this took so long is because i started creating a type of start screen and finished it but then i thought whats the point in a start screen? it would just be an inconvinience so i removed it. Then i worked on the test over overlay which took long because of the css which is a pain. Also small changes like removing text in the restart button and i changed the accuracy calculation by still counting the mistakes you corrected.

I have limited the lines to show max three lines and scroll as you type. It starts scrolling each 2nd line. I tried so many different method for this one as one solved a problem then caused another etc. In the end i found the solution but then the caret wasnt updating properly all i needed was to place the scroll function call so it happens before updating the caret position then i had to remove the smooth scroll behaviour in the CSS so the delay would be gone and update it instantly. Also removed the underline on the correct characters so its a bit more readable.

Wow this took a long time. I added WPM, accuracy stats and timer for timed and passage mode. I also improved the resets and added endTest function. The WPM calculation took so damn long to figure out myself. Shouldve just searched for the formula lmao.

The site now gets a quote from my data.json file that has all the quotes saved. Firstly it gets the difficulty that user has selected (default is easy) then it gets quote array of that difficulty and selects a random quote from that to display. I also centered the text so it looks a bit better

Added a caret and function for the reset button. The rest of the things doesnt have a function yet but soon it will. I also kind of blocked the hidden input by disabling the arrow keys and keeping the inputs caret at the end so the user cant accidentally go back and only be where the visible caret is. Heres a video of how it looks rn. Pls excuse my bad typing lmao

I finally got the typing working. It tracks each letter typed and adds a incorrect or correct class. The backspace works correctly aswell. Took long because i put three equal signs on the null check so it only checked if it was null and not undefined so it never removed the classes when using backspace lol. When i realized i removed one = and it worked again

Finished the mobile layout and the desktop layout. Tried to make it as responsive as i could but hadnt worked properly with CSS for a long long time so i was a little rusty. Took a bit much time to get this layout right even tho its a simple one.

doing a quick devlog. i finished the dropdown menu for difficulty and mode. Also added toggle on and off function for it that toggles the visibility by adding and removing a “show” class. also started with the actual typing area. Basically the text will go over the user input and the user input will be hidden so it looks like you are typing the letters.

Gonna be making a typing speed tester. i started with the layout of the page. Doing the mobile first approach.