Skip to content

Commit 85736d1

Browse files
solygambassolygambas
committed
add typing game
1 parent f7246eb commit 85736d1

File tree

5 files changed

+297
-2
lines changed

5 files changed

+297
-2
lines changed

‎69-infinite scroll posts/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
body {
1515
background-color: var(--main-color);
16+
background-image: linear-gradient(315deg, var(--main-color) 0%, var(--light-color) 100%);
1617
color: var(--dark-color);
1718
font-family: "Roboto", sans-serif;
1819
display: flex;

‎70-typing game/index.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Speed Typer</title>
14+
</head>
15+
<body>
16+
<button id="settings-btn" class="settings-btn">
17+
<i class="fas fa-cog"></i>
18+
</button>
19+
<div class="settings" id="settings">
20+
<form id="settings-form">
21+
<label for="difficulty">Difficulty</label>
22+
<select id="difficulty">
23+
<option value="easy">Easy</option>
24+
<option value="medium">Medium</option>
25+
<option value="hard">Hard</option>
26+
</select>
27+
</form>
28+
</div>
29+
<div class="container">
30+
<h2>👩‍💻 Speed Typer 👨‍💻</h2>
31+
<small>Type the following:</small>
32+
<h1 id="word"></h1>
33+
<input
34+
type="text"
35+
id="text"
36+
autocomplete="off"
37+
autofocus
38+
placeholder="Type the word here..."
39+
/>
40+
<p class="time-container">Time left: <span id="time">10s</span></p>
41+
<p class="score-container">Score: <span id="score">0</span></p>
42+
<div id="end-game-container" class="end-game-container"></div>
43+
</div>
44+
<script src="script.js"></script>
45+
</body>
46+
</html>

‎70-typing game/script.js

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const word = document.getElementById("word");
2+
const text = document.getElementById("text");
3+
const scoreElement = document.getElementById("score");
4+
const timeElement = document.getElementById("time");
5+
const endgameElement = document.getElementById("end-game-container");
6+
const settingsButton = document.getElementById("settings-btn");
7+
const settings = document.getElementById("settings");
8+
const settingsForm = document.getElementById("settings-form");
9+
const difficultySelect = document.getElementById("difficulty");
10+
11+
// List of words for game
12+
const words = [
13+
"sigh",
14+
"tense",
15+
"airplane",
16+
"ball",
17+
"pies",
18+
"juice",
19+
"warlike",
20+
"bad",
21+
"north",
22+
"dependent",
23+
"steer",
24+
"silver",
25+
"highfalutin",
26+
"superficial",
27+
"quince",
28+
"eight",
29+
"feeble",
30+
"admit",
31+
"drag",
32+
"loving",
33+
];
34+
35+
let randomWord;
36+
let score = 0;
37+
let time = 10;
38+
// let difficulty = "medium";
39+
let difficulty =
40+
localStorage.getItem("difficulty") !== null
41+
? localStorage.getItem("difficulty")
42+
: "medium";
43+
44+
const timeInterval = setInterval(updateTime, 1000);
45+
46+
function getRandomWord() {
47+
return words[Math.floor(Math.random() * words.length)];
48+
}
49+
50+
function addWordToDom() {
51+
randomWord = getRandomWord();
52+
word.innerText = randomWord;
53+
}
54+
55+
function updateScore() {
56+
score++;
57+
scoreElement.innerText = score;
58+
}
59+
60+
function updateTime() {
61+
time--;
62+
timeElement.innerText = time + "s";
63+
if (time === 0) {
64+
clearInterval(timeInterval);
65+
gameOver();
66+
}
67+
}
68+
69+
function gameOver() {
70+
endgameElement.innerHTML = `
71+
<h1>Time ran out</h1>
72+
<p>Your final score is ${score}</p>
73+
<button onclick="location.reload()">Play Again</button>
74+
`;
75+
endgameElement.style.display = "flex";
76+
}
77+
78+
text.addEventListener("input", (e) => {
79+
const insertedText = e.target.value;
80+
if (insertedText === randomWord) {
81+
e.target.value = "";
82+
addWordToDom();
83+
updateScore();
84+
if (difficulty === "hard") time += 2;
85+
else if (difficulty === "medium") time += 3;
86+
else time += 5;
87+
updateTime();
88+
}
89+
});
90+
91+
settingsButton.addEventListener("click", () =>
92+
settings.classList.toggle("hide")
93+
);
94+
settingsForm.addEventListener("change", (e) => {
95+
difficulty = e.target.value;
96+
localStorage.setItem("difficulty", difficulty);
97+
});
98+
99+
// Init
100+
difficultySelect.value = difficulty;
101+
addWordToDom();

‎70-typing game/style.css

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
2+
3+
:root {
4+
--primary-color: #b8c6db;
5+
--secondary-color: #04577D;
6+
--overlay-color: rgba(0,0,0,0.3);
7+
--gradient-color: #f5f7fa;
8+
--text-color: #F0F0ED;
9+
--border-radius: 0.5rem;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
background-color: var(--primary-color);
18+
background-image: linear-gradient(315deg, var(--primary-color) 0%, var(--gradient-color) 100%)
19+
;
20+
font-family: "Syne Mono", monospace;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: center;
25+
min-height: 100vh;
26+
overflow: hidden;
27+
margin: 0;
28+
}
29+
30+
button {
31+
cursor: pointer;
32+
font-size: 14px;
33+
font-family: inherit;
34+
border-radius: var(--border-radius);
35+
padding: 10px 15px;
36+
border: none;
37+
}
38+
39+
button:hover {
40+
color: var(--text-color);
41+
background-color: var(--primary-color);
42+
}
43+
44+
button:active {
45+
transform: scale(0.98);
46+
}
47+
48+
select {
49+
width: 200px;
50+
padding: 5px;
51+
font-family: inherit;
52+
appearance: none;
53+
-webkit-appearance: none;
54+
-moz-appearance: none;
55+
border-radius: var(--border-radius);
56+
background-color: var(--gradient-color);
57+
}
58+
59+
select:focus,
60+
button:focus, input:focus {
61+
outline: 0;
62+
}
63+
64+
.settings-btn {
65+
position: absolute;
66+
bottom: 30px;
67+
right: 30px;
68+
}
69+
70+
.settings {
71+
position: absolute;
72+
top: 0;
73+
left: 0;
74+
width: 100%;
75+
background-color: var(--overlay-color);
76+
color: var(--text-color);
77+
height: 70px;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
transform: translateY(0);
82+
transition: transform 0.3s ease-in-out;
83+
}
84+
85+
.settings.hide {
86+
transform: translateY(-100%)
87+
}
88+
89+
.container {
90+
background-color: var(--secondary-color);
91+
padding: 20px;
92+
border-radius: var(--border-radius);
93+
box-shadow: 0 3px 5px var(--overlay-color);
94+
color: var(--text-color);
95+
position: relative;
96+
text-align: center;
97+
width: 500px;
98+
max-width: 90vw;
99+
}
100+
101+
h1 {
102+
margin: 0;
103+
}
104+
105+
h2 {
106+
background-color: var(--overlay-color);
107+
padding: 8px;
108+
border-radius: var(--border-radius);
109+
margin: 0 0 40px;
110+
}
111+
112+
input {
113+
border: 0;
114+
border-radius: var(--border-radius);
115+
font-size: 14px;
116+
width: 300px;
117+
padding: 12px 20px;
118+
margin-top: 10px;
119+
}
120+
121+
.score-container {
122+
position: absolute;
123+
top: 60px;
124+
right: 20px;
125+
}
126+
127+
.time-container {
128+
position: absolute;
129+
top: 60px;
130+
left: 20px;
131+
}
132+
133+
.end-game-container {
134+
background-color: inherit;
135+
border-radius: inherit;
136+
display: none;
137+
align-items: center;
138+
justify-content: center;
139+
flex-direction: column;
140+
position: absolute;
141+
top: 0;
142+
left: 0;
143+
width: 100%;
144+
height: 100%;
145+
z-index: 1;
146+
}

‎README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# 60 Projects In 60 Days - HTML, CSS & JavaScript
1+
# 70 Projects In 70 Days - HTML, CSS & JavaScript
22

3-
60+ mini web projects using HTML, CSS and JavaScript.
3+
70+ mini web projects using HTML, CSS and JavaScript.
44

55
[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
66

@@ -75,6 +75,7 @@
7575
| 67 | [Expense Tracker](https://github.com/solygambas/html-css-fifty-projects/tree/master/67-expense%20tracker) | [Live Demo](https://codepen.io/solygambas/full/OJbqyro) |
7676
| 68 | [Music Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/68-music%20player) | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG) |
7777
| 69 | [Infinite Scroll Posts](https://github.com/solygambas/html-css-fifty-projects/tree/master/69-infinite%20scroll%20posts) | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB) |
78+
| 70 | [Typing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/70-typing%20game) | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq) |
7879

7980
These projects are mostly based on 2 courses by Brad Traversy (2020):
8081

0 commit comments

Comments
 (0)