Skip to content

Commit 28557c2

Browse files
Vivek-GuptaXCodeVivek-GuptaXCode
committed
Added a Speed Typing Test.
1 parent ce3c20d commit 28557c2

File tree

3 files changed

+420
-0
lines changed

3 files changed

+420
-0
lines changed

‎SpeedTypingTest/Vivek-GuptaXCode/app.js

+223
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
const bttn = document.querySelector('#test-click')
2+
const inputArea = document.querySelector('#input-field')
3+
const paragraphBox = document.querySelector("#paragraph-box")
4+
const startBttn = document.querySelector('#start-bttn')
5+
const wpm_container = document.querySelector('#wpm_con')
6+
const time_container = document.querySelector('#time_con')
7+
const accuracy_container = document.querySelector('#acc_con')
8+
9+
let index_no = 0
10+
let mainArray = []
11+
let spanArray = []
12+
let modArray = []
13+
let typedChar
14+
let r_time = 0
15+
let curr_input = ''
16+
let middle_char = 30
17+
let scroll_amnt = 10
18+
let curr_input_array = []
19+
let latest_arr_count = 0
20+
21+
let char_typedCount = 0
22+
let char_typedWrong = 0
23+
let char_typedCorrect = 0
24+
25+
let timer
26+
let count = 0
27+
let array_count = 0
28+
29+
let typedChar_arr = []
30+
let charCheckWrong = false
31+
32+
33+
const words = [
34+
"JavaScript is the only language that I'm aware of that people feel they don't need to learn before they start using it.",
35+
"Be humble, communicate clearly, and respect others. It costs nothing to be kind, but the impact is priceless.",
36+
"If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.",
37+
"I make mistakes because I'm always operating at my limit. If I only stay in comfortable territory all the time, that's not so much fun.",
38+
"If you learn how to solve problems, you can go through life and do pretty well.",
39+
"To be successful, you want to surround yourself with very talented folks whose skills blend very well. That's the secret of success.",
40+
"Good judgement comes from experience. Experience comes from bad judgement."
41+
]
42+
43+
function again() {
44+
resetVal()
45+
inputArea.focus()
46+
startBttn.innerHTML = 'Again'
47+
init()
48+
check()
49+
time_counter()
50+
}
51+
52+
function resetVal() {
53+
paragraphBox.scrollLeft = 0;
54+
clearInterval(timer)
55+
inputArea.value = ''
56+
latest_arr_count = 0;
57+
time_container.innerText = '0'
58+
wpm_container.innerText = ''
59+
accuracy_container.innerText = ''
60+
char_typedWrong = 0
61+
count = 0
62+
charCheckWrong = false
63+
array_count = 0
64+
typedChar_arr = []
65+
66+
}
67+
68+
function focus_now() {
69+
inputArea.focus()
70+
}
71+
72+
function start() {
73+
startBttn.innerHTML = 'Start'
74+
inputArea.value = ''
75+
resetVal()
76+
paragraphBox.innerHTML = "Press Start button to begin......"
77+
}
78+
79+
function randomWords() {
80+
return Math.floor(Math.random() * words.length)
81+
}
82+
83+
function init() {
84+
paragraphBox.innerHTML = ''
85+
words[randomWords()].split('').forEach(ch => {
86+
const span_char = document.createElement('span')
87+
span_char.innerText = ch
88+
paragraphBox.appendChild(span_char)
89+
// array_count += 1
90+
})
91+
}
92+
93+
function changeSpace(s) {
94+
if (s == ' ') {
95+
s = ' '
96+
}
97+
return s
98+
}
99+
100+
function create_Array() {
101+
curr_input = inputArea.value
102+
curr_input_array = curr_input.split('').map(changeSpace)
103+
104+
spanArray = paragraphBox.querySelectorAll('span')
105+
spanArray.forEach(e => {
106+
if (e.innerHTML == ' ') {
107+
e.innerHTML = ' '
108+
}
109+
})
110+
}
111+
112+
let index_char = -1
113+
function check() {
114+
create_Array()
115+
116+
let s = []
117+
spanArray.forEach(e => {
118+
s.push(e.innerHTML)
119+
})
120+
121+
spanArray[0].classList.add('cursor-highlight')
122+
123+
spanArray.forEach((char, index) => {
124+
typedChar = curr_input_array[index]
125+
126+
// Cheking if latest char is the same with the text
127+
if (typedChar == null) { //If the test have not yet started
128+
char.classList.remove('wrong')
129+
char.classList.remove('correct')
130+
} else if (typedChar == char.innerHTML) { //If the char typed match
131+
char.classList.remove('wrong')
132+
char.classList.add('correct')
133+
charCheckWrong = false
134+
// typedChar_arr[index_char] = 1
135+
} else if (typedChar != char.innerHTML) { //If the char do not match
136+
char.classList.remove('correct')
137+
char.classList.add('wrong')
138+
charCheckWrong = true
139+
// typedChar_arr[index_char] = 0
140+
}
141+
142+
// Highlighting the wrong and cursor-highlight
143+
if (index == curr_input_array.length) {
144+
if (char === ' ') char.classList.add('space-wrong')
145+
char.classList.add('cursor-highlight')
146+
} else char.classList.remove('cursor-highlight')
147+
148+
if (curr_input_array.length == spanArray.length) {
149+
// TODO display the Stats
150+
clearInterval(timer)
151+
char_typedWrong = determine_wrong_counts()
152+
153+
console.log(char_typedWrong, "= wrong counts")
154+
calculate_wpm()
155+
calculate_acc()
156+
// startBttn.classList.remove('hidden')
157+
startBttn.focus()
158+
}
159+
})
160+
161+
typedChar_arr.push(charCheckWrong)
162+
}
163+
164+
165+
function calculate_acc() {
166+
let acc = Math.round(((spanArray.length - char_typedWrong) / (spanArray.length)) * 100)
167+
accuracy_container.innerText = acc + '%'
168+
}
169+
170+
function time_counter() {
171+
timer = setInterval(() => {
172+
count++
173+
time_container.innerText = count
174+
}, 1002)
175+
}
176+
177+
function calculate_wpm() {
178+
let wpm_score = Math.round(((spanArray.length) / 5) / (count / 60))
179+
wpm_container.innerText = wpm_score
180+
}
181+
182+
function determine_wrong_counts() {
183+
let typedWrong = 0
184+
for (let i = 0; i < typedChar_arr.length; i++) {
185+
if (typedChar_arr[i] == true) {
186+
typedWrong += 1
187+
}
188+
}
189+
return typedWrong
190+
}
191+
192+
function ignored_Key(e_key) {
193+
const ignore_keys = {
194+
'Shift': 0,
195+
'Alt': 0,
196+
'Control': 0,
197+
}
198+
return ignore_keys[e_key] ?? -1
199+
}
200+
201+
let scroll_actual_val = 0
202+
inputArea.addEventListener('keydown', (e) => {
203+
let name = e.key
204+
if (name == 'Backspace') {
205+
if (curr_input_array.length > spanArray.length * 0.90) {
206+
paragraphBox.scrollLeft -= 0
207+
} else {
208+
paragraphBox.scrollLeft -= spanArray.length / 10
209+
}
210+
}
211+
else if (ignored_Key(name) == 0) paragraphBox.scrollLeft += 0
212+
else {
213+
// scroll_left_val += spanArray.length / 10
214+
paragraphBox.scrollLeft += spanArray.length / 10
215+
scroll_actual_val += spanArray.length / 10
216+
}
217+
218+
}, false)
219+
220+
221+
222+
start()
223+

‎SpeedTypingTest/Vivek-GuptaXCode/index.css

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
* {
2+
margin: 0;
3+
box-sizing: border-box;
4+
/* color: rgb(244, 238, 224); */
5+
6+
}
7+
8+
body {
9+
background-color: rgb(57, 54, 70);
10+
text-align: center;
11+
font-size: x-large;
12+
}
13+
14+
#main-container {
15+
background-color: rgb(79, 69, 87);
16+
min-height: 100px;
17+
min-width: 50vw;
18+
max-height: 60vh;
19+
height: fit-content;
20+
width: 80vw;
21+
22+
padding: 5px;
23+
align-self: center;
24+
border-radius: 0.7rem;
25+
position: relative;
26+
margin: auto;
27+
margin-top: 100px;
28+
display: grid;
29+
grid-template-columns: 1fr;
30+
grid-template-rows: 1fr 2rem;
31+
32+
}
33+
34+
#paragraph-box {
35+
background-color: rgb(109, 93, 110);
36+
color: rgba(244, 238, 224, 0.5);
37+
margin: 2.5px;
38+
min-height: 4rem;
39+
border-radius: 0.5rem;
40+
text-align: left;
41+
padding: 1rem;
42+
margin-bottom: 0.5rem;
43+
line-height: 2rem;
44+
min-width: 2rem;
45+
width: fill;
46+
font-family: 'JetBrains Mono', monospace;
47+
overflow-y: scroll;
48+
scroll-behavior: smooth;
49+
}
50+
51+
#input-box {
52+
/* border: 1px rgb(244, 238, 224) solid; */
53+
overflow-y: auto;
54+
/* height: 9rem; */
55+
56+
}
57+
58+
#input-field {
59+
font-family: 'Courier New', Courier, monospace;
60+
/* font-size: x-large; */
61+
color: rgb(79, 69, 87);
62+
background: none;
63+
outline: none;
64+
border: none;
65+
height: 0;
66+
width: 100%;
67+
/*--debug purposes--*/
68+
/* border: 1px red solid; */
69+
}
70+
71+
#start-bttn {
72+
width: 100px;
73+
height: 50px;
74+
color: rgba(244, 238, 224);
75+
position: relative;
76+
margin: 10px;
77+
border: none;
78+
background-color: rgb(79, 69, 87);
79+
border-radius: 10px;
80+
box-shadow: 0 1px 1px rgba(244, 238, 224, 0.4);
81+
}
82+
83+
#stats-container {
84+
/* width: 620px; */
85+
width: fit-content;
86+
height: 200px;
87+
display: grid;
88+
grid-template-columns: repeat(3, 1fr);
89+
grid-template-rows: 200px;
90+
column-gap: 30px;
91+
text-align: center;
92+
align-self: center;
93+
justify-items: center;
94+
margin: auto;
95+
margin-top: 20px;
96+
background-color: rgb(79, 69, 87);
97+
padding-left: 10px;
98+
padding-right: 10px;
99+
border-radius: 10px;
100+
}
101+
102+
#accuracy,
103+
#time,
104+
#wpm {
105+
background-color: rgb(109, 93, 110);
106+
width: 100%;
107+
margin: 10px;
108+
border-radius: 5px;
109+
color: rgb(244, 238, 224);
110+
padding: 5px;
111+
font-family: JetBrains Mono;
112+
font-weight: bold;
113+
}
114+
115+
#wpm_con,
116+
#time_con {
117+
height: 85%;
118+
padding: 20px;
119+
font-size: 5rem;
120+
}
121+
122+
#acc_con {
123+
height: 85%;
124+
padding: 20px;
125+
font-size: 5rem;
126+
}
127+
128+
#small-sec {
129+
font-size: 0.7rem;
130+
}
131+
132+
.wrong {
133+
background-color: Red;
134+
}
135+
136+
.correct {
137+
color: rgb(244, 238, 224);
138+
}
139+
140+
.background-fix {
141+
background-color: rgb(109, 93, 110);
142+
}
143+
144+
.cursor-highlight {
145+
background-color: rgba(57, 54, 70, 0.4);
146+
}
147+
148+
.space-wrong {
149+
background-color: Red;
150+
}
151+
152+
.hidden {
153+
visibility: hidden;
154+
}
155+
156+
.broken {
157+
background-color: red;
158+
color: green;
159+
}

0 commit comments

Comments
 (0)