Skip to content

Commit 798981b

Browse files
shloka-guptashloka-gupta
authored
Merge pull request #177 from khushi-purwar/dev-khushiP
Typing Speed Test Website
2 parents ed0dbf7 + e347aed commit 798981b

File tree

8 files changed

+178
-0
lines changed

8 files changed

+178
-0
lines changed

‎Typing Speed Test Website/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Typing Speed Test Website
2+
3+
## Description
4+
This website is used to check the typing speed of the user. It will the give the information of how many seconds require for typing the particular sentence.
5+
6+
## Use of the Project
7+
User can improve his/her typing speed.
8+
9+
## How to use the project
10+
11+
1. Clone the Web-dev-min-projects, use this command `git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git `
12+
2. Move inside Typing Speed Test Webite folder, use this command, `cd Typing Speed Test Website`
13+
3. Open the index.html file and run with live server.
14+
4. Click on the start button.
15+
5. A sentence appear on the screen, write that sentence in the empty space.
16+
6. After writing the complete sentence, click on Done.
17+
7. You will get your result, how many words are typed and how much time required to type those words.
18+
19+
## Stacks Used
20+
* HTML & CSS
21+
* JavaScript
22+
23+
24+
## ScreenShot
25+
26+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushiP/Typing%20Speed%20Test%20Website/screenshots/ss1.png" />
27+
28+
After Clicking on the Start button, UI looks like:
29+
30+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushiP/Typing%20Speed%20Test%20Website/screenshots/ss2.png" />
31+
32+
After clicking on the Done Button, it give the result:
33+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushiP/Typing%20Speed%20Test%20Website/screenshots/ss3.png" />
34+
35+
36+
## Live Demo
37+
38+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushiP/Typing%20Speed%20Test%20Website/screenshots/demo.gif" />

‎Typing Speed Test Website/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>Document</title>
9+
<link rel="stylesheet" href="style.css"> </head>
10+
11+
<body>
12+
<div class="mainDiv">
13+
<div class="centerDiv">
14+
<h1>Welcome To Typing Speed Test Website
15+
</h1>
16+
<h2 id="msg"></h2>
17+
<textarea name="" id="mywords" cols="100" rows="10" placeholder="Click on the Start Button and Type Above Appearing Text as it is..."></textarea>
18+
<button id="btn" class="mainBtn">Start</button>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
24+
</html>

‎Typing Speed Test Website/screenshots/demo.gif

10.9 MB
Loading

‎Typing Speed Test Website/screenshots/ss1.png

71.5 KB
Loading

‎Typing Speed Test Website/screenshots/ss2.png

99.4 KB
Loading

‎Typing Speed Test Website/screenshots/ss3.png

75.3 KB
Loading

‎Typing Speed Test Website/script.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const sentences = [
2+
"After all, you're only an immortal until someone manages to kill you. After that, you were just long-lived. As long as poverty, injustice and gross inequality persist in our world, none of us can truly rest.",
3+
4+
"We were like deaf people trying to dance to a beat we couldn't hear, long after the music actually stopped. For once you have tasted flight you will walk the earth with your eyes turned skywards, for there you have been and there you will long to return.",
5+
6+
"Time plays like an accordion in the way it can stretch out and compress itself in a thousand melodic ways. Months on end may pass blindingly in a quick series of chords, open-shut, together-apart; and then a single melancholy week may seem like a year's pining, one long unfolding note.",
7+
8+
"Life is beautiful, as long as it consumes you. When it is rushing through you, destroying you, life is gorgeous, glorious. It is when you burn a slow fire and save fuel, that life's not worth having.",
9+
10+
"As long as people have been on this earth, the moon has been a mystery to us. Think about it. She is strong enough to pull the oceans, and when she dies away, she always comes back again. My mama used to tell me Our Lady lived on the moon and that I should dance when her face was bright and hibernate when it was dark."
11+
];
12+
13+
const msg = document.getElementById('msg');
14+
const typedWords = document.getElementById('mywords');
15+
const btn = document.getElementById('btn');
16+
17+
let startTime, endTime;
18+
19+
const playGame = () => {
20+
let randomNumber = Math.floor(Math.random() * sentences.length);
21+
msg.innerText = sentences[randomNumber];
22+
let date = new Date();
23+
startTime = date.getTime();
24+
btn.innerText = "Done";
25+
}
26+
27+
const endGame = () => {
28+
let date = new Date();
29+
endTime = date.getTime();
30+
let totalTime = 0,
31+
wordCount = 0;
32+
totalTime = Math.round((endTime - startTime) / 1000) // milliseconds -> 10.23 means 10 seconds 23 milliseconds
33+
console.log(totalTime);
34+
35+
let totalStr = typedWords.value;
36+
wordCount = wordCounter(totalStr);
37+
38+
let finalMsg = `You Typed Total ${wordCount} words in ${totalTime} seconds. `;
39+
msg.innerText = finalMsg;
40+
}
41+
42+
43+
44+
const wordCounter = (str) => {
45+
let response = str.split(" ").length;
46+
console.log(response);
47+
return response;
48+
}
49+
50+
btn.addEventListener('click', function() {
51+
console.log(this); // current btn
52+
if (this.innerText == 'Start') {
53+
typedWords.disabled = false;
54+
playGame();
55+
} else if (this.innerText == "Done") {
56+
typedWords.disabled = true;
57+
btn.innerText = "Start";
58+
endGame();
59+
}
60+
})
61+

‎Typing Speed Test Website/style.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.mainDiv {
8+
width: 100%;
9+
height: 100vh;
10+
position: relative;
11+
}
12+
13+
.centerDiv {
14+
position: absolute;
15+
top: 50%;
16+
left: 50%;
17+
transform: translate(-50%, -50%);
18+
text-align: center;
19+
}
20+
21+
h1 {
22+
text-transform: capitalize;
23+
text-align: center;
24+
font-size: 25px;
25+
margin-bottom: 30px;
26+
text-shadow: 1px 2px 3px #2980b9;
27+
font-size: 2.1rem;
28+
}
29+
30+
h2 {
31+
text-align: center;
32+
margin-bottom: 25px;
33+
user-select: none;
34+
}
35+
36+
textarea {
37+
height: 300px;
38+
background: rgb(190, 229, 247);
39+
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
40+
border-radius: 10px;
41+
border: 5px solid #34495e;
42+
padding: 10px;
43+
font-size: 1.3rem;
44+
margin-bottom: 18px;
45+
outline: none;
46+
}
47+
48+
.mainBtn {
49+
border-radius: 20px;
50+
padding: 10px 20px;
51+
font-size: 1rem;
52+
background: #ecf0f1;
53+
border: 5px solid #2980b9;
54+
cursor: pointer;
55+
}

0 commit comments

Comments
 (0)