Skip to content

Commit 803a143

Browse files
SUGAM-ARORASUGAM-ARORA
authored
Merge pull request #729 from saketh-05/fixes2
Added TypingTest project
2 parents 0935d8f + feb955d commit 803a143

File tree

7 files changed

+187
-2
lines changed

7 files changed

+187
-2
lines changed

‎src/Components/CardMain.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,9 @@ const features = [
102102
pro: icon,
103103
hearts: 90,
104104
title: "TypingTest",
105-
dev: "SophiaWilson",
105+
dev: "Saketh D.Surya",
106106
type: "Education",
107+
github: "https://github.com/saketh-05/TypingTest",
107108
role: "Web Developer, SEO Specialist",
108109
about:
109110
"I'm a proficient web developer and SEO specialist, dedicated to creating optimized, high-performance websites. I focus on both the technical and strategic aspects of web development to enhance visibility and user engagement.",

‎src/Components/projects/card7.png

-46.2 KB
Loading

‎src/Components/projects/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,9 @@ export const features = [
9696
pro: icon,
9797
hearts: 90,
9898
title: "TypingTest",
99-
dev: "SophiaWilson",
99+
dev: "Saketh D.Surya",
100100
type: "Education",
101+
github: "https://github.com/saketh-05/TypingTest",
101102
role: "Web Developer, SEO Specialist",
102103
about: "I'm a proficient web developer and SEO specialist, dedicated to creating optimized, high-performance websites. I focus on both the technical and strategic aspects of web development to enhance visibility and user engagement.",
103104
text: "TypingTest is a comprehensive platform designed to help users improve their typing speed and accuracy. This intuitive and user-friendly application offers a range of typing tests and practice exercises to suit different skill levels. With TypingTest, users can track their progress over time, identify areas for improvement, and achieve their typing goals. The platform features real-time feedback, detailed performance analytics, and personalized training plans to enhance the learning experience. TypingTest supports multiple languages and keyboard layouts, making it accessible to a global audience. Whether you're a beginner looking to learn touch typing or an experienced typist aiming to increase your speed, TypingTest provides the tools and resources to help you succeed."

‎src/Projects/TypingTest/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Typing Test</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Typing Speed Test</h1>
12+
<div id="test-area">
13+
<p id="text-to-type"></p>
14+
<textarea id="input-area" placeholder="Start typing..."></textarea>
15+
</div>
16+
<div id="result">
17+
<p>Time: <span id="time">0</span> seconds</p>
18+
<p>Errors: <span id="errors">0</span></p>
19+
<p>WPM: <span id="wpm">0</span></p>
20+
<button id="reset">Restart</button>
21+
</div>
22+
</div>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎src/Projects/TypingTest/script.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// Elements
2+
const textToType = document.getElementById('text-to-type');
3+
const inputArea = document.getElementById('input-area');
4+
const timeDisplay = document.getElementById('time');
5+
const errorsDisplay = document.getElementById('errors');
6+
const wpmDisplay = document.getElementById('wpm');
7+
const resetButton = document.getElementById('reset');
8+
9+
// Variables
10+
let timer;
11+
let time = 0;
12+
let errors = 0;
13+
let isTyping = false;
14+
let offsetCheck = "";
15+
16+
const textTyping = ["The quick brown fox jumps over the lazy dog.",
17+
"A journey of a thousand miles begins with a single step.",
18+
"She sells seashells by the seashore, where the sand is soft and warm.",
19+
"The rain in Spain stays mainly in the plain, causing the fields to remain green",
20+
"To be or not to be, that is the question, pondered the thoughtful philosopher.",
21+
"In the middle of difficulty lies opportunity, waiting for those who seek it.",
22+
"The early bird catches the worm, but the second mouse gets the cheese.",
23+
"Beneath the stars, the vast ocean whispered secrets to the moonlit sky.",
24+
"Innovation distinguishes between a leader and a follower in every industry.",
25+
"The beauty of the world lies in the diversity of its people and cultures."
26+
];
27+
28+
const randomIndexText = () => {
29+
const rIndex = Math.floor(Math.random() * (10));
30+
textToType.innerText = offsetCheck = textTyping[rIndex];
31+
};
32+
33+
document.addEventListener("DOMContentLoaded",() => {
34+
randomIndexText();
35+
});
36+
37+
// Functions
38+
function startTimer() {
39+
timer = setInterval(() => {
40+
time++;
41+
timeDisplay.innerText = time;
42+
}, 1000);
43+
}
44+
45+
function stopTimer() {
46+
clearInterval(timer);
47+
}
48+
49+
function calculateWPM() {
50+
const wordsTyped = inputArea.value.trim().split(' ').length;
51+
const wpm = Math.round((wordsTyped / time) * 60);
52+
return wpm;
53+
}
54+
55+
function resetTest() {
56+
stopTimer();
57+
time = 0;
58+
errors = 0;
59+
isTyping = false;
60+
inputArea.value = '';
61+
timeDisplay.innerText = time;
62+
errorsDisplay.innerText = errors;
63+
wpmDisplay.innerText = 0;
64+
inputArea.disabled = false;
65+
randomIndexText();
66+
inputArea.focus();
67+
}
68+
69+
// Event Listeners
70+
inputArea.addEventListener('input', () => {
71+
if (!isTyping) {
72+
isTyping = true;
73+
startTimer();
74+
}
75+
76+
const typedText = inputArea.value;
77+
const typedTextLength = typedText.length;
78+
79+
if (typedText === offsetCheck) {
80+
stopTimer();
81+
inputArea.disabled = true;
82+
wpmDisplay.innerText = calculateWPM();
83+
}
84+
85+
if (typedTextLength > 0) {
86+
if (typedText[typedTextLength - 1] !== offsetCheck[typedTextLength - 1]) {
87+
errors++;
88+
errorsDisplay.innerText = errors;
89+
}
90+
}
91+
});
92+
93+
resetButton.addEventListener('click', resetTest);
94+
95+
// Initialize
96+
resetTest();

‎src/Projects/TypingTest/style.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f8b7b7;
4+
color: #333;
5+
margin: 0;
6+
padding: 0;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
}
12+
13+
.container {
14+
text-align: center;
15+
background-color: white;
16+
padding: 30px;
17+
border-radius: 8px;
18+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
19+
width: 600px;
20+
height: auto;
21+
}
22+
23+
h1 {
24+
margin-bottom: 20px;
25+
}
26+
27+
#test-area {
28+
margin-bottom: 20px;
29+
}
30+
31+
#text-to-type {
32+
font-size: 18px;
33+
margin-bottom: 10px;
34+
}
35+
36+
#input-area {
37+
width: 100%;
38+
height: 100px;
39+
padding: 10px;
40+
font-size: 16px;
41+
border: 1px solid #ddd;
42+
border-radius: 4px;
43+
}
44+
45+
#result {
46+
font-size: 16px;
47+
}
48+
49+
#result p {
50+
margin: 5px 0;
51+
}
52+
53+
#reset {
54+
padding: 10px 20px;
55+
font-size: 16px;
56+
margin-top: 10px;
57+
cursor: pointer;
58+
border: none;
59+
background-color: #007bff;
60+
color: white;
61+
border-radius: 4px;
62+
}

‎src/img/card7.png

39.5 KB
Loading

0 commit comments

Comments
 (0)