SpeedTypingTest/index.html at main · ishrakhann/SpeedTypingTest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speed Typing Test</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css"> <!-- Link to external CSS file -->
</head>
<body class="bg-gray-50 min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- Header -->
        <header class="text-center mb-8">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">
                <i class="fas fa-keyboard text-blue-600"></i>
                Speed Typing Test
            </h1>
            <p class="text-gray-600">Test your typing speed and accuracy in real-time</p>
        </header>
        <!-- WPM progress ring -->
<path id="wpm-progress" class="progress-ring text-blue-600 stroke-current"
    d="M18 2.0845
    a 15.9155 15.9155 0 0 1 0 31.831
    a 15.9155 15.9155 0 0 1 0 -31.831"
    fill="none"
    stroke-width="2"
    stroke-dasharray="100, 100"
    stroke-dashoffset="75"
/>

<!-- Accuracy progress ring -->
<path id="accuracy-progress" class="progress-ring text-green-600 stroke-current"
    d="M18 2.0845
    a 15.9155 15.9155 0 0 1 0 31.831
    a 15.9155 15.9155 0 0 1 0 -31.831"
    fill="none"
    stroke-width="2"
    stroke-dasharray="100, 100"
    stroke-dashoffset="25"
/>
        <!-- Stats Panel -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- WPM -->
                <div class="text-center">
                    <div class="relative inline-block">
                        <svg class="w-20 h-20" viewBox="0 0 36 36">
                            <path class="text-gray-200 stroke-current"
                                d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                                fill="none"
                                stroke-width="2"
                                stroke-dasharray="100, 100"
                            />
                            <path class="progress-ring text-blue-600 stroke-current"
                                d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                                fill="none"
                                stroke-width="2"
                                stroke-dasharray="100, 100"
                                stroke-dashoffset="75"
                            />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <span class="text-2xl font-bold text-gray-800" id="wpm">0</span>
                        </div>
                    </div>
                    <p class="text-sm text-gray-600 mt-2">Words Per Minute</p>
                </div>

                <!-- Accuracy -->
                <div class="text-center">
                    <div class="relative inline-block">
                        <svg class="w-20 h-20" viewBox="0 0 36 36">
                            <path class="text-gray-200 stroke-current"
                                d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                                fill="none"
                                stroke-width="2"
                                stroke-dasharray="100, 100"
                            />
                            <path class="progress-ring text-green-600 stroke-current"
                                d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                                fill="none"
                                stroke-width="2"
                                stroke-dasharray="100, 100"
                                stroke-dashoffset="25"
                            />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <span class="text-2xl font-bold text-gray-800" id="accuracy">100%</span>
                        </div>
                    </div>
                    <p class="text-sm text-gray-600 mt-2">Accuracy</p>
                </div>

                <!-- Time -->
                <div class="text-center">
                    <div class="text-4xl font-bold text-gray-800 mb-2" id="timer">60s</div>
                    <p class="text-sm text-gray-600">Time Remaining</p>
                </div>
            </div>
        </div>

        <!-- Typing Area -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
            <div id="text-display" class="typing-text text-lg text-gray-700 mb-6 p-4 bg-gray-50 rounded-lg min-h-[120px] leading-relaxed">
                Loading text...
            </div>

            <div class="relative">
                <input
                    type="text"
                    id="typing-input"
                    class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
                    placeholder="Start typing here..."
                    autocomplete="off"
                    autocorrect="off"
                    autocapitalize="off"
                    spellcheck="false"
                >
                <div class="absolute right-3 top-3">
                    <button id="restart-btn" class="text-gray-400 hover:text-blue-600 transition-colors">
                        <i class="fas fa-redo-alt"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Results Panel (Initially Hidden) -->
        <div id="results-panel" class="bg-white rounded-xl shadow-lg p-6 mb-6 hidden">
            <h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Test Complete!</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                <div>
                    <div class="text-3xl font-bold text-blue-600" id="final-wpm">0</div>
                    <p class="text-sm text-gray-600">WPM</p>
                </div>
                <div>
                    <div class="text-3xl font-bold text-green-600" id="final-accuracy">100%</div>
                    <p class="text-sm text-gray-600">Accuracy</p>
                </div>
                <div>
                    <div class="text-3xl font-bold text-purple-600" id="final-time">60s</div>
                    <p class="text-sm text-gray-600">Time</p>
                </div>
                <div>
                    <div class="text-3xl font-bold text-orange-600" id="final-errors">0</div>
                    <p class="text-sm text-gray-600">Errors</p>
                </div>
            </div>
            <div class="text-center mt-6">
                <button id="new-test-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
                    <i class="fas fa-play mr-2"></i>Start New Test
                </button>
            </div>
        </div>

        <!-- Instructions -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">
                <i class="fas fa-info-circle text-blue-600 mr-2"></i>How to Play
            </h3>
            <ul class="text-gray-600 space-y-2">
                <li>• Type the text shown above as quickly and accurately as possible</li>
                <li>• The test lasts for 60 seconds</li>
                <li>• Press spacebar to complete each word</li>
                <li>• Use backspace to correct mistakes</li>
                <li>• Your WPM and accuracy are calculated in real-time</li>
            </ul>
        </div>
    </div>

    <script src="script.js"></script> <!-- Link to external JavaScript file -->
</body>

</html>