DEV Community

Cover image for Typing Speed Test Coding Challenge
Kaori A
Kaori A

Posted on

Typing Speed Test Coding Challenge

#webdev #codingchallenge #typingspeed

Frontend Mentor - Typing Speed Test WebApp

scrn

This is my solution to the Typing Speed Test challenge on Frontend Mentor, with HTML, CSS and vanilla JavaScript.
The user can choose the difficulty level from Easy, Medium and Hard. Also, the test timeframe can be selected from Timed (60 seconds) or Passage (no limit). The real-time results show Word-Per-Minute, Accuracy and Time. When the first typing test is finished, the current result is stored as a Personal Best in the local storage. If the subsequent test result exceeds the current Personal Best, the stored Personal Best is updated. The relevant modal screen will be displayed to encourage users to keep trying.

The requirements

  • Start a test by clicking the start button or by clicking the passage and typing
  • Select a difficulty level (Easy, Medium, Hard) for passages of varying complexity
  • Switch between "Timed (60s)" mode and "Passage" mode (timer counts up, no limit)
  • Restart at any time to get a new random passage from the selected difficulty
  • See real-time WPM, accuracy, and time stats while typing
  • See visual feedback showing correct characters (green), errors (red/underlined), and cursor position
  • Correct mistakes with backspace (original errors still count against accuracy)
  • View results showing WPM, accuracy, and characters (correct/incorrect) after completing a test
  • See a "Baseline Established!" message on their first test, setting their personal best
  • See a "High Score Smashed!" celebration with confetti when beating their personal best
  • Have their personal best persist across sessions via localStorage
  • View the optimal layout depending on their device's screen size
  • See hover and focus states for all interactive elements
  • Data will be dynamically populated

Links

scrn2

My approach

HTML

  • Semantic HTML
  • Clear landmarks
  • Descriptive naming for class and id
  • Dynamically populate data

CSS

  • :root variables for consistency and easier maintenance
  • Flex and/or Grid for clear structure and flexible lalyout change
  • Hover and Focus states for visual feedback
  • Subtle @keyframes animation for the "High Score" screen
  • Responsive layout with MediaQueries

JavaScript

  • async function to fetch the data
  • Error handling with displaying an error message
  • Added "View Results" button to clearly indicate what to do after finishing the test
  • Conditional rendering in accordance with the difficulty level selected, by checking the classList
  • Conditional time-count in accordance with the time-mode selected, by checking the classList
  • Randomly display the text using Maty.random() function
  • Store, retrieve, display the Personal Best score using localStorage.getItem

Takeaway

  • Never forget initialization.
  • The scope matters! Whether one line of code is inside or outside of the function can affect the entire code.
  • Name the class and id as descriptive as possible to avoid confusion later.
  • When to declare Date.now() changes everything.

Going Forward

The timer function is not yet stable, especially when restarting the test. I suspect the issue lies in the Date.now() method. I was somewhat overwhelmed with how frequently I need to call Date.now() in the entire userflow. It might have complicated the timing logic. For the future project, I would like to plan the code architecture thoroughly before getting started to streamline the flow.

Top comments (0)