• add new data of a large number of sentences

• when user finishes typing a sentence correctly, render a new sentence on the page.

💰 Motivation

The user will need to see the whole phrase they are about to type.

⚙️ Implementation

• Create an index.html for the markup.
• Put background and text colors in styles.css.
• Select a font from Google Fonts for the text.
• Create an Array of Objects representing the characters in the phrase.
• Define a function that renders a single character.
• Define a function that renders all characters and appends them to the page.
• Adjust CSS styles to look visually appealing.
  

• add a start button

• style button

• add event listener to start button

• when start button is clicked, render words to page

💰 Motivation

The user needs to be alerted to successful or failed attempts at typing a character.

⚙️ Implementation

• Add failures property to each character in the application state set to 0.
• Add an event listener to the window to listen for 'keydown' events that re-renders the phrase.
• Compare the pressed key with the current character. Record failures to match the current character.
• Enhance function for rendering a single character to conditionally add a special failed class to the element.
• When a matching key is pressed, update the currentCharacter property of the application state.
  

• Redo theme colors

• Redo font sizing

• Redo font colors

• Add animations if possible

• change function names to be more clear / change variable names to be more clear

• enhance functionality of createSpan function to display failed spaces.

💰 Motivation

The user needs to know how far along they are in the phrase.

⚙️ Implementation

• Create an Object to represent the application state, and make the characters a property.
• Add a property to the application state to track the index of the currentCharacter.
• Define a CSS class to highlight the current-character.
• Enhance function that renders a character to conditionally add a special current-character class.
  

💰 Motivation

The user will need to know that the game is over and how they performed.

⚙️ Implementation

• Define a function that calculates the user's success rate given the recorded failures.
• Define a function that renders the user's score and a "game over" message.
• Enhance 'keydown' listener to render and show the user's score when they've reached the end.
  

• when start button is pressed, add a 30 second timer countdown

• when timer reaches 0, end game and calculate score