#09Typewriter Effect

Overview

Create a typewriter effect in React that displays text character by character at a configurable speed.

Requirements

• Display the initial text in the textarea.
• Show an empty display area at first (the typewriter output).
• Display an input to adjust typing speed (milliseconds per character) with a minimum value.
• Animate typing text character by character at the selected speed when Start typing is clicked.
• Clear both the input text and the typed display when Clear is clicked.
• Ensure that typing stops automatically when the end of the text is reached.
• Prevent multiple concurrent typing intervals from running at the same time.

Notes

• Users may type custom text or use the default text for the effect.
• Typing speed is configurable; very low values make the text appear almost instantly.
• Make sure multiple clicks on "Start typing" don’t break the animation.
• Clearing the text should stop the typing effect immediately.
• Consider what happens if the text is empty when "Start typing" is pressed.

Tests

1. renders initial state correctly
2. types custom text from textarea
3. clears text and display when Clear is clicked
4. updates typing speed from the input