A modern, user-friendly typing speed test application. Measure your typing speed (WPM) and accuracy, track your progress with high scores, and improve your typing skills!
- 3 Difficulty Levels: Choose from Easy, Medium, and Hard levels with varying text complexity
- Customizable Duration: Select test duration (30s, 60s, 90s, or 120s) based on your preference
- Real-Time Statistics: Live WPM (Words Per Minute), accuracy percentage, and countdown timer
- Visual Feedback: Instant character-by-character highlighting showing correct (green) and incorrect (red) typing
- Dark/Light Theme: Toggle between dark and light modes for comfortable typing in any environment
- Sound Effects: Audio feedback for keystrokes, errors, and completion with toggle option
- High Score System: Local storage saves your top 10 scores per difficulty level
- Progressive Web App (PWA): Install on mobile or desktop for offline use
- Responsive Design: Optimized for all devices from mobile phones to large desktop screens
- Celebration Effects: Confetti animation on successful test completion
- HTML5: Semantic and accessible markup structure
- CSS3: Modern CSS features including Grid, Flexbox, CSS Variables, and smooth animations
- Vanilla JavaScript (ES6+): Pure JavaScript with modern features like arrow functions, template literals, and modules
- LocalStorage API: Persistent data storage for high scores and user preferences
- Service Worker: PWA support for offline functionality and app-like experience
- Web Audio API: Custom synthesized sound effects without external audio files
- Canvas Confetti: Celebration particle effects on test completion
- Clone the repository:
git clone https://github.com/Serkanbyx/s1.3_Type-Speed-Test.git- Navigate to the project directory:
cd s1.3_Type-Speed-Test- Open with a local server:
Using Python:
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000Using Node.js:
npx serveUsing VS Code:
- Install "Live Server" extension
- Right-click on
index.htmland select "Open with Live Server"
- Open your browser and navigate to
http://localhost:8000(or the port shown by your server)
- Select Difficulty: Choose Easy, Medium, or Hard based on your skill level
- Set Duration: Pick your preferred test duration (30s, 60s, 90s, or 120s)
- Click Difficulty Button: Start the game by clicking on your chosen difficulty
- Start Typing: Click the input area and begin typing the displayed text
- Track Progress: Watch your WPM and accuracy update in real-time
- Complete Test: Finish when timer ends or complete the text perfectly
- View Results: See your final WPM, accuracy, total characters, and error count
- Check High Scores: View your best performances in the High Scores section
Words Per Minute is calculated using the standard formula where 5 characters equal one word:
const wordsTyped = correctCharacters / 5;
const elapsedMinutes = elapsedTime / 60000; // Convert milliseconds to minutes
const wpm = Math.round(wordsTyped / elapsedMinutes);Accuracy percentage is based on correctly typed characters versus total typed characters:
const accuracy = Math.round((correctCharacters / totalTypedCharacters) * 100);Each character is validated in real-time as you type:
if (inputValue[i] === targetText[i]) {
// Mark as correct (green)
} else {
// Mark as incorrect (red)
}Edit the textCollections object in script.js to add custom sentences:
const textCollections = {
easy: ["Your custom easy text here.", "Another simple sentence."],
medium: ["Your medium difficulty text with more complexity."],
hard: ["Your challenging text with advanced vocabulary and structure."],
};Modify CSS variables in style.css to customize the color scheme:
:root {
--primary-color: #6366f1; /* Main accent color */
--success-color: #10b981; /* Correct character color */
--error-color: #ef4444; /* Incorrect character color */
--bg-color: #0f172a; /* Background color */
}Customize sound frequencies in the playSound function in script.js:
case 'keypress':
oscillator.frequency.value = 800; // Pitch (Hz)
gainNode.gain.value = 0.05; // Volume (0-1)
break;✅ Three difficulty levels with appropriate text complexity
✅ Four customizable test durations
✅ Real-time WPM and accuracy calculation
✅ Character-by-character visual feedback
✅ Dark and light theme support
✅ Toggleable sound effects
✅ High score leaderboard with local storage
✅ PWA support for offline use
✅ Responsive design for all devices
✅ Confetti celebration on completion
✅ Keyboard sound feedback
✅ Error sound indication
- Custom text input mode
- Multiplayer racing mode
- Cloud sync for high scores
- Typing lessons and tutorials
- Detailed analytics and progress charts
- Multiple language support
- Keyboard heatmap visualization
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create your feature branch:
git checkout -b feat/amazing-feature- Commit your changes with descriptive messages:
git commit -m "feat: add amazing feature"- Push to the branch:
git push origin feat/amazing-feature- Open a Pull Request
feat:- New featurefix:- Bug fixdocs:- Documentation changesstyle:- Code style changes (formatting, etc.)refactor:- Code refactoringtest:- Adding or updating testschore:- Maintenance tasks
This project is licensed under the MIT License - see the LICENSE file for details.
Serkan Bayraktar
- 🌐 Website: serkanbayraktar.com
- 💻 GitHub: @Serkanbyx
- 📧 Email: serkanbyx1@gmail.com
- Canvas Confetti - Celebration particle effects
- Shields.io - README badges
- Lucide Icons - SVG icon inspiration
- Inter Font - Typography
Have questions or suggestions? Feel free to reach out!
- 🐛 Open an Issue
- 📧 Email: serkanbyx1@gmail.com
- 🌐 Website: serkanbayraktar.com
⭐ If you like this project, don't forget to give it a star!