typing13/index.html at master · MK-ORGANIZATION-1/typing13 · 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
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title> MK page Typing</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }
        .maindiv {
            width: 100%;
            height: 100vh;
            position: relative;
            background-color: aqua;
        }
        .centerdiv{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        h1{
            text-transform: capitalize;
            text-align: center;
            margin-bottom: 30px;
            color: #ecfof1;
            text-shadow : 1px 2px 3px #2980b9;
            font-size:2.1rem;
        }
        h2{
            text-align: center;
        }
        textarea{
            background-color: rgb(64, 78, 199);
            box-shadow: 0 0 1px rgb(8, 9, 20);
            border-radius: 10px 10px 0 0;
            color:white;
            font-size: 1.3rem;
        }
        .mainbtn{
            padding: 10px 20px;
            border-radius: 20px;
            border: 5px dotted #2980b9;
            background: #ecfof1;
            font-size:1rem;        }
    </style>
</head>

<body>
    <div class="maindiv">
        <div class="centerdiv">
            <h1>
                Welcome To Typing Speed Test
            </h1>
            <h2 id="msg"></h2>
            <br>
            <textarea id="mywords" rows="10" cols="100" placeholder="remember , be nice"></textarea>
            <br>
            <button id="btn" class="mainbtn">start </button>
        </div>
    </div>

<script>
    const setofwords = [
        " kazi musharraf",
        " welcome to my speed test ",
        " this is testing your limit",
        "1. The quick brown fox jumps over the lazy dog.",
"2. My Mum tries to be cool by saying that she likes all the same things that I do.",

"3. If the Easter Bunny and the Tooth Fairy had babies would they take your teeth and leave chocolate for you?",

"4. A purple pig and a green donkey flew a kite in the middle of the night and ended up sunburnt.",

"5. What was the person thinking when they discovered cow’s milk was fine for human consumption… and why did they do it in the first place!?",

"6. Last Friday in three week’s time I saw a spotted striped blue worm shake hands with a legless lizard.",

"7. Wednesday is hump day, but has anyone asked the camel if he’s happy about it?",

"8. If Purple People Eaters are real… where do they find purple people to eat?",

"9. A song can make or ruin a person’s day if they let it get to them.",

"10. Sometimes it is better to just walk away from things and go back to them later when you’re in a better frame of mind.",

"11. Writing a list of random sentences is harder than I initially thought it would be.",

"12. Where do random thoughts come from?",

"13. Lets all be unique together until we realise we are all the same.",

"14. I will never be this young again. Ever. Oh damn… I just got older.",

"15. If I don’t like something, I’ll stay away from it.",

"16. I love eating toasted cheese and tuna sandwiches.",

"17. If you like tuna and tomato sauce- try combining the two. It’s really not as bad as it sounds.",

"18. Someone I know recently combined Maple Syrup & buttered Popcorn thinking it would taste like caramel popcorn. It didn’t and they don’t recommend anyone else do it either.",

"19. Sometimes, all you need to do is completely make an ass of yourself and laugh it off to realise that life isn’t so bad after all.",

"20. When I was little I had a car door slammed shut on my hand. I still remember it quite vividly.",

"21. The clock within this blog and the clock on my laptop are 1 hour different from each other.",

"22. I want to buy a onesie… but know it won’t suit me.",

"23. I was very proud of my nickname throughout high school but today- I couldn’t be any different to what my nickname was.",

"24. I currently have 4 windows open up… and I don’t know why.",

"25. I often see the time 11:11 or 12:34 on clocks.",

"26. This is the last random sentence I will be writing and I am going to stop mid-sent"
    ];
    const msg = document.getElementById('msg');
    const typewords = document.getElementById('mywords');
    const btn = document.getElementById('btn');

    let starttime ,endtime ;

    const playgame = () =>{
        let randomnumber = Math.floor(Math.random()*setofwords.length);
        msg.innerText = setofwords[randomnumber];
        let date = new Date();
        starttime = date.getTime();
        btn.innerText = "done";
    }
    const endplay = () =>{
        let date = new Date();
        endtime = date.getTime();
        let totaltime = ((endtime-starttime)/1000);
        console.log(totaltime);

        let totalstr = typewords.value;
        let wordcount = wordcounter(totalstr);

        let speed = Math.round((wordcount / totaltime) * 60);

        let finalmsg = " you speeed is " +speed+ "words per minute" ;

        finalmsg += comaprewords(msg.innerText,totalstr);

        msg.innerText = finalmsg;
    }
    const comaprewords = (str1,str2) =>{
        let words1 = str1.split(" ");
        let words2 = str2.split(" ");
        let cnt = 0;

        words1.forEach(function (item,index){
            if(item==words2[index]) {
                cnt++;
            }
        })
        let errorwords = (words1.length - cnt);
        return (cnt + " correct out of " + words1.length + " words and the total number of error are "+ errorwords + ".");

    }
    const wordcounter = (str) =>{
        let response = str.split(" ").length;
        console.log(response);
        return response;
    }

    btn.addEventListener('click',function(){
        if(this.innerText == 'start'){
            typewords.disabled = false;
            playgame();
        }
        else if(this.innerText == "done"){
            typewords.disabled =true;
            btn.innerText = 'start';
            endplay();
        }
    })


</script>
</body>

</html>