11 | typing Speed test
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Lexend+Deca:wght@100;200;300;400;500;600;700&family=Poppins:wght@300;400;600&display=swap');
2 |
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: 'Poppins', sans-serif;
8 | }
9 |
10 | html{
11 | font-size: 62.5%;
12 | }
13 |
14 | body{
15 | height: 100vh;
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | background-color: rgba(191, 172, 226, 0.35);
20 | }
21 |
22 | .typing-section{
23 | text-align: center;
24 | }
25 |
26 | #textarea{
27 | border: .1rem solid #A084DC;
28 | border-radius: 1rem;
29 | max-width: 50rem;
30 | width: 50rem;
31 | height: 20rem;
32 | padding: 1rem 2rem;
33 | font-size: 1.6rem;
34 | }
35 |
36 | #btn{
37 | display: inline-block;
38 | padding: 1rem 2.4rem;
39 | border: none;
40 | border-radius: 1rem;
41 | background-color: #645CBB;
42 | color: #fff;
43 | font-size: 1.8rem;
44 | margin-top: 1.6rem;
45 | }
46 |
47 | h2{
48 | font-size: 2.4rem;
49 | text-transform: capitalize;
50 | color: #645CBB;
51 | text-align: center;
52 | }
53 |
54 | #showSentence, #score{
55 | font-size: 1.6rem;
56 | margin: 2rem 0;
57 | letter-spacing: .02rem;
58 | text-align: center;
59 | }
60 |
--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | // (actualWords / totalTimeTaken) * 60;
2 |
3 | const typing_ground = document.querySelector('#textarea');
4 | const btn = document.querySelector('#btn');
5 | const score = document.querySelector('#score');
6 | const show_sentence = document.querySelector('#showSentence');
7 |
8 | let startTime, endTime, totalTimeTaken;
9 |
10 |
11 | const sentences = ['The quick brown fox jumps over the lazy dog 1',
12 | 'The quick brown fox jumps over the lazy dog 2',
13 | 'The quick brown fox jumps over the lazy dog 3 ']
14 |
15 | // step 5
16 |
17 | const calculateTypingSpeed = (time_taken) => {
18 | let totalWords = typing_ground.value.trim();
19 | let actualWords = totalWords === '' ? 0 : totalWords.split(" ").length;
20 |
21 | if(actualWords !== 0) {
22 | let typing_speed = (actualWords / time_taken) * 60;
23 | typing_speed = Math.round(typing_speed);
24 | score.innerHTML = `Your typing speed is ${typing_speed} words per minutes & you wrote ${actualWords} words & time taken ${time_taken} sec`;
25 | }else{
26 | score.innerHTML = `Your typing speed is 0 words per minutes & time taken ${time_taken} sec`;
27 | }
28 | }
29 |
30 | // step 4
31 | const endTypingTest = () => {
32 | btn.innerText = "Start";
33 |
34 | let date = new Date();
35 | endTime = date.getTime();
36 |
37 | totalTimeTaken = (endTime -startTime) / 1000;
38 |
39 | // console.log(totalTimeTaken);
40 |
41 | calculateTypingSpeed(totalTimeTaken);
42 |
43 | show_sentence.innerHTML = "";
44 | typing_ground.value = "";
45 | }
46 |
47 |
48 | // step 3
49 | const startTyping = () => {
50 | let randomNumber = Math.floor(Math.random() * sentences.length);
51 | // console.log(randomNumber);
52 | show_sentence.innerHTML = sentences[randomNumber];
53 |
54 | let date = new Date();
55 | startTime = date.getTime();
56 |
57 | btn.innerText = "Done";
58 | }
59 |
60 |
61 |
62 |
63 | // step 2
64 | btn.addEventListener('click', () => {
65 | switch (btn.innerText.toLowerCase()) {
66 | case "start":
67 | typing_ground.removeAttribute('disabled');
68 | startTyping();
69 | break;
70 |
71 | case "done":
72 | typing_ground.setAttribute('disabled' , 'true');
73 | endTypingTest();
74 | break;
75 | }
76 | })
77 |
--------------------------------------------------------------------------------