Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit be82cdb

Browse files
Typing Game Using HTML, CSS and JavaScript
1 parent 1ee722c commit be82cdb

File tree

3 files changed

+126
-0
lines changed

3 files changed

+126
-0
lines changed

‎86. Typing Game/app.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const main = document.querySelector(".main");
2+
const typeArea = document.querySelector(".typingArea");
3+
const btn = document.querySelector(".btn");
4+
5+
const words = [
6+
"A day in the life of programmer",
7+
"What is JavaScript?",
8+
"What is React?",
9+
"What is Programming Language?",
10+
"What's your name?",
11+
"Where are you from?",
12+
"This is just random word",
13+
"What is Remix.js?",
14+
"New Technologies",
15+
"Is programming hard?",
16+
"Why do you wanna become a programmer?",
17+
"Which programming language you like the most?",
18+
"What is Golang? and why do you wanna learn it?",
19+
"What is CSS",
20+
];
21+
22+
const game = {
23+
start: 0,
24+
end: 0,
25+
user: "",
26+
arrText: "",
27+
};
28+
29+
btn.addEventListener("click", () => {
30+
if (btn.textContent === "Start") {
31+
play();
32+
typeArea.value = "";
33+
typeArea.disabled = false;
34+
} else if (btn.textContent === "Done") {
35+
typeArea.disabled = true;
36+
main.style.borderColor = "white";
37+
end();
38+
}
39+
});
40+
41+
function play() {
42+
let randText = Math.floor(Math.random() * words.length);
43+
main.textContent = words[randText];
44+
game.arrText = words[randText];
45+
main.style.borderColor = "#c8c8c8";
46+
btn.textContent = "Done";
47+
const duration = new Date();
48+
game.start = duration.getTime(); // unix timestamp
49+
}
50+
51+
function end() {
52+
const duration = new Date();
53+
game.end = duration.getTime();
54+
const totalTime = (game.end - game.start) / 1000;
55+
game.user = typeArea.value;
56+
const correct = results();
57+
main.style.borderColor = "white";
58+
main.innerHTML = `Time: ${totalTime} Score: ${correct.score} out of ${correct.total}`;
59+
btn.textContent = "Start";
60+
}
61+
62+
function results() {
63+
let valueOne = game.arrText.split(" ");
64+
let valueTwo = game.user.split(" ");
65+
let score = 0;
66+
valueOne.forEach((word, idx) => {
67+
if (word === valueTwo[idx]) {
68+
score++;
69+
}
70+
});
71+
72+
return { score, total: valueOne.length };
73+
}

‎86. Typing Game/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Typing Challenge</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="main"></div>
12+
<textarea name="words" class="typingArea"></textarea>
13+
<br />
14+
<button class="btn">Start</button>
15+
</div>
16+
<script src="app.js"></script>
17+
</body>
18+
</html>

‎86. Typing Game/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
text-align: center;
6+
}
7+
8+
.container {
9+
width: 70%;
10+
padding: 10px;
11+
}
12+
13+
.main {
14+
text-align: center;
15+
padding: 10px;
16+
font-size: 2em;
17+
border: 3px solid white;
18+
}
19+
20+
.typingArea {
21+
width: 100%;
22+
height: 350px;
23+
margin-top: 20px;
24+
}
25+
26+
.btn {
27+
width: 20%;
28+
outline: none;
29+
border: none;
30+
font-size: 2em;
31+
padding: 10px;
32+
color: white;
33+
background-color: blueviolet;
34+
margin-top: 20px;
35+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /