So Slow!
${c} You should do more practice!
About Average!
${c} You can do better!
Great Job!
${c} You're doing great!
Insane!
${c} You're are Awesome!
Hmmm!
Please stop playing around and start typing!
18 |
4 | * @version 1.0.0
5 | * @license under MIT
6 | * @copyright © 2018 Awran5. All rights reserved.
7 | * @see
8 | *
9 | */
10 |
11 | // Shorthand for querySelectors
12 | const select = e => document.querySelector(e);
13 | const selectAll = e => document.querySelectorAll(e);
14 |
15 | // DOM elements
16 | const input = select('#textInput');
17 | const output = select('#textOutput');
18 | const inputFull = select('#textFull');
19 | // Counters
20 | const _timer = select('#timer');
21 | const _wpm = select('#wpm');
22 | const _cpm = select('#cpm');
23 | const _errors = select('#errors');
24 | const _accuracy = select('#accuracy');
25 | const _totalWords = select('#totalWords');
26 | const _writtenWords = select('#writtenWords');
27 | // Modal
28 | const modal = select('#ModalCenter');
29 | const modalBody = select('.modal-body');
30 | const modalClose = selectAll('.modal-close');
31 | const modalReload = select('#modalReload');
32 | // Control btns
33 | const btnPaly = select('#btnPlay');
34 | const btnRefresh = select('#btnRefresh');
35 | // Key sound
36 | const soundOn = select('.icon-sound-on');
37 | const soundOff = select('.icon-sound-off');
38 | const keyClick = select('#keyClick');
39 | const keyBeep = select('#keyBeep');
40 |
41 | let sound = true;
42 | soundOn.addEventListener('click', e => {
43 | e.currentTarget.classList.add('d-none');
44 | soundOff.classList.remove('d-none');
45 | sound = false;
46 | })
47 |
48 | soundOff.addEventListener('click', e => {
49 | e.currentTarget.classList.add('d-none');
50 | soundOn.classList.remove('d-none');
51 | sound = true;
52 | })
53 |
54 | // Array will hold all quotes that stored in external JSON file
55 | const allQuotes = [];
56 | // Fetch that JSON file for data
57 | fetch('js/quotes.json')
58 | .then(response => response.json())
59 | .then(data => allQuotes.push(...data))
60 | .catch(error => console.error('Error:', error));
61 |
62 | // Function to return random key from an array
63 | const random = array => array[Math.floor(Math.random() * array.length)];
64 |
65 | // speedTyping Class
66 | class speedTyping {
67 |
68 | constructor() {
69 | this.index = 0; // Main index
70 | this.words = 0; // Completed words index
71 | this.errorIndex = 0; // Errors index
72 | this.correctIndex = 0; // Correct index
73 | this.accuracyIndex = 0; // Accuracy counter
74 | this.cpm = 0; // CPM counter
75 | this.wpm = 0; // WPM cpm / 5
76 | this.interval = null; // interval counter
77 | this.duration = 60 // Test duration time (60 seconds)
78 | this.typing = false; // To check if we are typing
79 | this.quote = []; // Quotes array
80 | this.author = []; // Authors array
81 | }
82 |
83 | // Set the timer based on local time
84 | timer() {
85 | // Check first if its not running, Note that we set it to null
86 | if (typeof (this.interval) === 'number')
87 | return;
88 |
89 | // Timestamp in millisecond
90 | const now = Date.now();
91 | // Seconds when the test duration is done (60 seconds) converted to millisecond
92 | const done = now + this.duration * 1000;
93 | // Display the timer before interval run
94 | _timer.innerHTML = `${this.duration}s`;
95 | // Set interval
96 | this.interval = setInterval(() => {
97 | // Get seconds left. Note that we ran Date.now() again to update the time
98 | const secondsLeft = Math.round((done - Date.now()) / 1000);
99 | // Display the timer in DOM again
100 | _timer.innerHTML = `${secondsLeft}s`;
101 | // Stop when reach 0 and call finish function
102 | if (secondsLeft === 0) {
103 | this.stop();
104 | this.finish();
105 | }
106 | }, 1000);
107 | }
108 |
109 | // Start typing function when run when Start button clicked
110 | start() {
111 |
112 | // Filter out not 'easy' quotes. Later we could make difficulty levels?
113 | const filterdQuotes = allQuotes.filter(item => item.level !== 'Easy');
114 | // Get Authors / Quotes only
115 | const getQuote = filterdQuotes.map(item => item.quote);
116 | const getAuthor = filterdQuotes.map(item => item.author);
117 |
118 | // Get random author quotes
119 | this.author = random(getAuthor);
120 | // Get random quotes
121 | this.quote = random(getQuote);
122 | // Count how many words in a single quote by splitting the array by whitespaces
123 | const quoteWords = this.quote.split(' ').filter(i => i).length;
124 | // Display total words counter
125 | _totalWords.textContent = quoteWords;
126 |
127 | // Set the timer
128 | this.timer();
129 | // Set active class to Play btn
130 | btnPlay.classList.add('active');
131 | // Enable the typing area
132 | input.setAttribute('tabindex', '0');
133 | input.removeAttribute('disabled');
134 | // Add set focus and Active class
135 | input.focus();
136 | input.classList.add('active');
137 |
138 | // Check if we start typing
139 | if (!this.typing) {
140 | this.typing = true;
141 |
142 | // Display the quotes in the input div
143 | input.textContent = this.quote;
144 |
145 | // Start the event listener
146 | input.addEventListener('keypress', event => {
147 | // Prevent the default action
148 | event.preventDefault();
149 | // Just in case
150 | event = event || window.event;
151 | // Get the pressed key code
152 | const charCode = event.which || event.keyCode;
153 | // Read it as a normal key
154 | const charTyped = String.fromCharCode(charCode);
155 | // Compare the pressed key to the quote letter
156 | if (charTyped === this.quote.charAt(this.index)) {
157 | // Detect the spaces by white space " " or key code is (32) - Double check maybe not necessarily
158 | if (charTyped === " " && charCode === 32) {
159 | this.words++;
160 | // Display the written words
161 | _writtenWords.textContent = this.words;
162 | }
163 | // Increment the keys index
164 | this.index++;
165 |
166 | // Hold current quote
167 | const currentQuote = this.quote.substring(this.index, this.index + this.quote.length);
168 |
169 | // Update the input div value when typing
170 | input.textContent = currentQuote;
171 | output.innerHTML += charTyped;
172 | // Increment the correct keys
173 | this.correctIndex++;
174 | // If index = the quote length, that means the text is done, call the finish() method
175 | if (this.index === this.quote.length) {
176 | this.stop();
177 | this.finish();
178 | return;
179 | }
180 | // Play typing sound if enabled
181 | if (sound) {
182 | keyClick.currentTime = 0;
183 | keyClick.play();
184 | }
185 | } else {
186 | // Add the errors into the output div
187 | output.innerHTML += `${charTyped}`;
188 | // Increment the wrong keys counter
189 | this.errorIndex++;
190 | // Add accuracy error counter to the dom
191 | _errors.textContent = this.errorIndex;
192 | // Decrement the correct keys counter
193 | this.correctIndex--;
194 | // Play typing sound if enabled
195 | if (sound) {
196 | keyBeep.currentTime = 0;
197 | keyBeep.play();
198 | }
199 | }
200 | //const rawcpm = Math.floor(this.index / this.seconds * 60);
201 | // CPM counter
202 | this.cpm = this.correctIndex > 5 ? Math.floor(this.correctIndex / this.duration * 60) : 0;
203 | // Add to the dom
204 | _cpm.textContent = this.cpm;
205 | // WPM: (correct chars / total time * 60 / 5)
206 | this.wpm = Math.round(this.cpm / 5);
207 | _wpm.textContent = this.wpm;
208 | // Accuracy: (Correct chars * 100 / total index)
209 | this.accuracyIndex = this.correctIndex > 5 ? Math.round((this.correctIndex * 100) / this.index) : 0;
210 | // Add accuracy to the dom. We need to check it because division by 0 give us a special values (infinity, NaN)
211 | if (this.accuracyIndex > 0 && Number.isInteger(this.accuracyIndex))
212 | _accuracy.innerHTML = `${this.accuracyIndex}%`;
213 |
214 | });
215 | }
216 | }
217 | // Stop the timer
218 | stop() {
219 | // Clear timer and set interval to null
220 | clearInterval(this.interval);
221 | this.interval = null;
222 | // Just to be sure
223 | this.typing = false;
224 | // Reset The Timer value to 0
225 | _timer.textContent = '0';
226 | // Remove the start btn
227 | btnPaly.remove();
228 | // Remove the input area
229 | input.remove();
230 | // Set active class to Refresh btn
231 | btnRefresh.classList.add('active');
232 | // Show the full quote in the hidden div
233 | inputFull.classList.remove('d-none');
234 | // Show the tested quote
235 | inputFull.innerHTML = `“${this.quote}” – ${this.author}
`;
236 | // Completely stop
237 | return;
238 | }
239 |
240 | // Last action
241 | finish() {
242 | // Show the modal
243 | modal.style.display = 'block';
244 | const wpm = this.wpm;
245 | let result = '';
246 | const message = `Your typing speed is ${wpm} WPM which equals ${this.cpm} CPM. You've made a ${this.errorIndex} mistakes with ${this.accuracyIndex}% total accuracy.`;
247 |
248 | if (wpm > 5 && wpm < 20) {
249 | result = `
250 |
19 |
31 |
20 |
30 | -
21 |
- Total Words 0 22 |
- Written Words 0 24 |
- Errors 0 26 |
- Acuracy 0 28 |
23 |
25 |
27 |
32 |
45 |
33 |
44 | -
34 |
- Timer 0 35 |
- CPM 0 37 |
- WPM 0 39 |
- Last WPM 0 41 |
36 |
38 |
40 |
46 |
135 |
136 |
137 |
155 |
47 |
83 |
94 |
103 |
114 | 133 |
134 |
48 |
81 |
82 | How fast is your typing?
Click on the start button
49 | below to start the one-minute typing test and find out!
50 |
53 |
66 |
79 |
80 | 83 |
Just start typing and dont use Backslash to correct your 84 | mistakes. Your mistakes will be marked and shown below the writing box. Good luck!
85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |94 |
Tip!
95 |-
96 |
- Word Per Minute (WPM) is measured by calculating how many words you can type in 1 minute. 97 |
- Character Per Minute (CPM) calculates how many characters are typed per minute. 98 |
- The top typing speed was achieved by Stella Pajunas in 1946, whereas Mrs. Barbara Blackburn has averaged 100 | 150 wpm in 50 minutes and her top speed was 212 wpm. 101 |
103 |
104 |
113 | Average typing speed
105 |
106 | 0 - 20 Slow
107 | 20 - 40 Average
108 | 40 - 60 Fast
109 | 60 - 80 Professional
110 | 80 - 100+ Top
111 |
112 | 114 | 133 |
156 |
174 |
175 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
--------------------------------------------------------------------------------
/js/speedTyping.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @package speedTyping
3 | * @author Awran5
252 |
`
255 | } else if (wpm > 20 && wpm < 40) {
256 | result = `
257 | So Slow!
253 |${message} You should do more practice!
254 |
259 |
`
262 | } else if (wpm > 40 && wpm < 60) {
263 | result = `
264 | About Average!
260 |${message} You can do better!
261 |
266 |
`
269 | } else if (wpm > 60) {
270 | result = `
271 | Great Job!
267 |${message} You're doing great!
268 |
273 |
`
276 | } else {
277 | result = `
278 | Insane!
274 |${message} You're are Awesome!
275 |
280 |
`
283 | }
284 |
285 | // Update the DOM
286 | modalBody.innerHTML = result;
287 | // Target all modal close buttons
288 | modalClose.forEach(btn => btn.addEventListener('click', () => modal.style.display = 'none'));
289 | // Also close the modal when user clicks outside
290 | window.addEventListener('click', e => e.target === modal ? modal.style.display = 'none' : '');
291 | // Repeat the test btn
292 | modalReload.addEventListener('click', () => location.reload());
293 | // Save the wpm values values to localStorage
294 | localStorage.setItem('WPM', wpm);
295 | }
296 | }
297 | // Init the class
298 | const typingTest = new speedTyping();
299 |
300 | // Start the test when Start btn clicked
301 | btnPaly.addEventListener('click', () => typingTest.start());
302 | // Reload the page when Refresh btn is clicked
303 | btnRefresh.addEventListener('click', () => location.reload());
304 |
305 | // Save last wpm result to Local storage
306 | const savedWPM = localStorage.getItem('WPM') || 0;
307 | select('#result').innerHTML = `Hmmm!
281 |Please stop playing around and start typing!
282 |