#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
- renders initial state correctly
- types custom text from textarea
- clears text and display when Clear is clicked
- updates typing speed from the input