8000 typing-test · devashishg/devashishg.github.io@14c47c6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 14c47c6

Browse files
devashishgdevashishg
committed
typing-test
1 parent ec915ef commit 14c47c6

File tree

2 files changed

+221
-0
lines changed

2 files changed

+221
-0
lines changed

‎js/typo.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
2+
const typer = document.getElementById('typeHere');
3+
const letter = document.getElementById('letter');
4+
const reset = document.getElementById('reset');
5+
const result = document.getElementById('results');
6+
const info = document.getElementById('info');
7+
const cb = document.getElementById('shuffle');
8+
let index = 0;
9+
letter.innerHTML = arr[index];
10+
const response = [];
11+
12+
typer.addEventListener('input', (event) => {
13+
try {
14+
if (!!event.inputType.match('insert')) {
15+
if (event.data[event.data.length - 1].toUpperCase() === arr[index]) {
16+
index++;
17+
response.push(Date.now());
18+
info.innerHTML = `Last key-stroke from start: ${(response[response.length - 1] - response[0]) / 1000}s`
19+
}
20+
if (index < 26) {
21+
letter.innerHTML = arr[index];
22+
} else {
23+
letter.innerHTML = `Your time: ${(response[25] - response[0]) / 1000}s`;
24+
typer.setAttribute('disabled', 'true');
25+
result.innerHTML = `<div class="title">Final Results 🏆</div> ${getMeResults(response)}`;
26+
index = 0;
27+
info.innerHTML = '';
28+
}
29+
}
30+
31+
} catch (error) {
32+
info.innerHTML = error.message;
33+
}
34+
});
35+
36+
typer.addEventListener('keyup', (event) => {
37+
if (event.key === 'Enter') {
38+
resetAction();
39+
}
40+
});
41+
42+
cb.addEventListener('change', resetAction);
43+
reset.addEventListener('click', resetAction);
44+
45+
46+
function resetAction() {
47+
index = 0;
48+
if (cb.checked) {
49+
shuffle(arr);
50+
} else {
51+
arr.sort();
52+
}
53+
typer.value = '';
54+
letter.innerHTML = arr[index];
55+
typer.removeAttribute('disabled');
56+
result.innerHTML = '';
57+
response.length = [];
58+
info.innerHTML = '';
59+
}
60+
61+
62+
function getMeResults(response) {
63+
const start = response[0];
64+
let result = '';
65+
let index =
66+
response.forEach((element, ind) => {
67+
result += `<div class="element"><div class="key">${arr[ind]}</div> <div class="time"> ${(element - start === 0) ? 'Start' : (element - start) / 1000}s </div></div>`
68+
});
69+
response.length = 0;
70+
return result;
71+
}
72+
73+
function shuffle(array) {
74+
var currIndex = array.length, rnd;
75+
while (0 !== currIndex) {
76+
rnd = Math.floor(Math.random() * currIndex);
77+
currIndex--;
78+
[array[currIndex], array[rnd]] = [
79+
array[rnd], array[currIndex]];
80+
}
81+
}

‎typo-test.html

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Type Fast</title>
9+
<style>
10+
.results {
11+
display: flex;
12+
align-items: center;
13+
flex-wrap: wrap;
14+
justify-content: center;
15+
background-color: rgb(245 245 245);
16+
border-radius: 32px;
17+
margin-top: 10px;
18+
margin: 10px 20px;
19+
}
20+
21+
22+
input[type="reset"i] {
23+
padding: 5px 15px;
24+
font-size: 24px;
25+
background-color: rgba(6, 8, 17, 0.822);
26+
color: white;
27+
border: none;
28+
margin: 1px;
29+
border-radius: 5px;
30+
}
31+
32+
.key {
33+
padding: 10px;
34+
background-color: rgba(6, 8, 17, 0.822);
35+
border: 2px cadetblue solid;
36+
color: white;
37+
display: inline-flex;
38+
min-width: 20px;
39+
justify-content: center;
40+
box-shadow: 0 5px 5px #b6b6b6;
41+
text-shadow: 0 0.5px 1px #777, 0 2px 6px #f2f2f2;
42+
}
43+
44+
.key:hover {
45+
box-shadow: none;
46+
animation: name 1s ease 0s 1 alternate forwards;
47+
width: 12px;
48+
height: 15px;
49+
justify-content: center;
50+
animation-name: none;
51+
border: 2px rgb(150, 125, 125) solid;
52+
border-radius: 5px;
53+
align-items: center;
54+
}
55+
56+
.letter {
57+
text-align: center;
58+
font-size: 24px;
59+
padding: 20px;
60+
background-color: #dadada;
61+
border-radius: 20px;
62+
width: 350px;
63+
}
64+
65+
.element {
66+
display: flex;
67+
margin: 10px 32px;
68+
align-items: center;
69+
flex-direction: column;
70+
height: 90px;
71+
justify-content: space-evenly;
72+
cursor: pointer;
73+
}
74+
75+
.input-field {
76+
padding: 5px 10px;
77+
font-size: 24px;
78+
outline: none;
79+
width: 300px;
80+
margin-right: 1px;
81+
}
82+
83+
.reset {
84+
margin-left: auto !important;
85+
margin-top: 1px;
86+
margin-bottom: 1px;
87+
}
88+
89+
.input-area {
90+
display: flex;
91+
justify-content: center;
92+
flex-wrap: wrap;
93+
margin: 10px 20px;
94+
color: darkslategrey;
95+
font-size: 32px;
96+
}
97+
98+
.title {
99+
margin: 10px;
100+
font-size: 35px;
101+
color: #206d31;
102+
font-weight: bolder;
103+
width: 100%;
104+
text-align: center;
105+
}
106+
107+
.flex {
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
flex-direction: column;
112+
}
113+
</style>
114+
115+
</head>
116+
117+
<body>
118+
<div class="flex">
119+
<div class="input-area">
120+
Let's test your typing speed.
121+
</div>
122+
<em>Press enter to reset at any point of time.</em>
123+
<div id="letter" class="letter"></div>
124+
<div class="input-area">
125+
<input class="input-field" placeholder="Follow the alphabets shown above" type="text" id="typeHere"><input
126+
type="reset" id="reset" value="reset" class="reset">
127+
</div>
128+
<div>
129+
<input type="checkbox" name="Shuffle" id="shuffle" />
130+
<label for="Shuffle"> Shuffle & Reset </label>
131+
</div>
132+
</div>
133+
<div id="results" class="results"></div>
134+
<div id="info"></div>
135+
136+
</body>
137+
138+
<script src="./js/typo.js"></script>
139+
140+
</html>

0 commit comments

Comments
 (0)
0