Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Added Project Typing Speed Test #1942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions projects/Typing Speed Test/index.html
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Speed Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>⌨️ Typing Speed Test</h1>
<p>Test your typing speed and accuracy!</p>
</header>

<div class="difficulty-selector">
<button class="difficulty-btn active" data-level="easy">Easy</button>
<button class="difficulty-btn" data-level="medium">Medium</button>
<button class="difficulty-btn" data-level="hard">Hard</button>
</div>

<div class="stats-container">
<div class="stat-card">
<div class="stat-icon">⏱️</div>
<div class="stat-value" id="timer">60s</div>
<div class="stat-label">Time Left</div>
</div>
<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-value" id="wpm">0</div>
<div class="stat-label">WPM</div>
</div>
<div class="stat-card">
<div class="stat-icon">🎯</div>
<div class="stat-value" id="accuracy">100%</div>
<div class="stat-label">Accuracy</div>
</div>
<div class="stat-card">
<div class="stat-icon">❌</div>
<div class="stat-value" id="errors">0</div>
<div class="stat-label">Errors</div>
</div>
</div>

<div class="text-display" id="textDisplay"></div>

<div class="input-container">
<textarea
id="userInput"
placeholder="Click here and start typing..."
rows="4"
disabled
></textarea>
</div>

<div class="controls">
<button class="btn btn-primary" id="startBtn">Start Test</button>
<button class="btn btn-secondary" id="resetBtn">Reset</button>
</div>

<div class="results hidden" id="results">
<h2>🎉 Test Complete!</h2>
<div class="results-grid">
<div class="result-item">
<div class="result-label">Speed</div>
<div class="result-value" id="finalWpm">0 WPM</div>
</div>
<div class="result-item">
<div class="result-label">Accuracy</div>
<div class="result-value" id="finalAccuracy">0%</div>
</div>
<div class="result-item">
<div class="result-label">Errors</div>
<div class="result-value" id="finalErrors">0</div>
</div>
<div class="result-item">
<div class="result-label">Characters Typed</div>
<div class="result-value" id="finalChars">0</div>
</div>
</div>
<button class="btn btn-primary" id="tryAgainBtn">Try Again</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
104 changes: 104 additions & 0 deletions projects/Typing Speed Test/readMe.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
# ⌨️ Typing Speed Test

A modern, interactive typing speed test application that measures your typing speed (WPM), accuracy, and tracks errors in real-time.

## 🌟 Features

- **Three Difficulty Levels**
- Easy: Simple sentences with common words
- Medium: More complex sentences and vocabulary
- Hard: Advanced technical terms and complex concepts

- **Real-time Metrics**
- WPM (Words Per Minute) calculation
- Accuracy percentage tracking
- Error counting
- 60-second countdown timer

- **Visual Feedback**
- Color-coded text display
- Green for correct characters
- Red for incorrect characters
- Animated cursor on current position

- **Results Summary**
- Detailed performance breakdown
- Final WPM score
- Overall accuracy
- Total errors and characters typed

## 🚀 How to Use

1. **Select Difficulty**: Choose between Easy, Medium, or Hard
2. **Click Start Test**: The timer will begin and the input field will be enabled
3. **Start Typing**: Type the displayed text as accurately and quickly as possible
4. **Track Progress**: Watch your WPM, accuracy, and errors update in real-time
5. **View Results**: After 60 seconds or completing the text, see your final score
6. **Try Again**: Click "Try Again" to test with a new text sample

## 🎯 Scoring

- **WPM**: Based on the standard calculation of 5 characters = 1 word
- **Accuracy**: Percentage of correctly typed characters
- **Errors**: Total number of incorrect characters typed

## 💡 Tips for Better Scores

- Focus on accuracy first, then speed
- Keep your eyes on the screen, not your keyboard
- Maintain proper posture
- Practice regularly to improve muscle memory
- Use all fingers for optimal typing efficiency

## 🛠️ Technologies Used

- HTML5
- CSS3 (with Flexbox and Grid)
- Vanilla JavaScript (ES6+)

## 📱 Responsive Design

Works perfectly on:
- Desktop computers
- Laptops
- Tablets
- Mobile devices

## 🎨 Design Features

- Modern gradient UI
- Smooth animations
- Intuitive user interface
- Clean and minimal design
- Professional color scheme

## 🔧 Installation

1. Clone or download the repository
2. Open `index.html` in your web browser
3. No additional dependencies or setup required!

## 📝 Learning Objectives

This project demonstrates:
- DOM manipulation
- Event handling (keyboard events)
- Timer management with setInterval
- String comparison algorithms
- Real-time calculation and updates
- Responsive CSS design
- User interface/experience design

## 🤝 Contributing

Feel free to fork this project and submit pull requests for any improvements!

## 📄 License

Open source - Free to use and modify

---

**Happy Typing! 🚀**

Test your skills and improve your typing speed one word at a time!
Loading

AltStyle によって変換されたページ (->オリジナル) /