Skip to content

Commit ebdfd77

Browse files
limafreshlimafresh
committed
The design has been updated
1 parent 79e92a0 commit ebdfd77

File tree

5 files changed

+119
-115
lines changed

5 files changed

+119
-115
lines changed

‎assets/screenshot.png‎

-15.3 KB
Loading

‎index.html‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,26 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
6-
<link rel="stylesheet" href="styles.css">
6+
<link rel="stylesheet" href="style.css">
77
<link rel="icon" type="image/png" href="assets/icon.png">
88
<title>Math trainer</title>
99
</head>
1010
<body>
11-
<select id="select" onmousedown="return false" onclick="openSidebar()">
12-
<option value="0">Addition within 10</option>
13-
<option value="1">Addition within 100</option>
14-
<option value="2">Addition within 1000</option>
15-
<option value="3">Subtraction within 10</option>
16-
<option value="4">Subtraction within 100</option>
17-
<option value="5">Subtraction within 1000</option>
18-
<option value="6">Multiplication within 10</option>
19-
<option value="7">Division within 10</option>
20-
</select>
11+
<div id="topbar">
12+
<button id="openSidebarBtn" onclick="openSidebar()">&#x2630</button>
13+
<p id="modeName"></p>
14+
</div>
2115
<div id="sidebar">
2216
<button id="closeSidebarBtn" onclick="closeSidebar()">&times;</button>
2317
<div id="sidebarOptions">
24-
<button class="sidebarOption" id="add10" onclick="changeMode('+', 10, '0', 'add10')">Addition within 10</button>
25-
<button class="sidebarOption" id="add100" onclick="changeMode('+', 1, '1', 'add100')">Addition within 100</button>
26-
<button class="sidebarOption" id="add1000" onclick="changeMode('+', 0.1, '2', 'add1000')">Addition within 1000</button>
27-
<button class="sidebarOption" id="subtraction10" onclick="changeMode('-', 10, '3', 'subtraction10')">Subtraction within 10</button>
28-
<button class="sidebarOption" id="subtraction100" onclick="changeMode('-', 1, '4', 'subtraction100')">Subtraction within 100</button>
29-
<button class="sidebarOption" id="subtraction1000" onclick="changeMode('-', 0.1, '5', 'subtraction1000')">Subtraction within 1000</button>
30-
<button class="sidebarOption" id="multiplication10" onclick="changeMode('*', 10, '6', 'multiplication10')">Multiplication within 10</button>
31-
<button class="sidebarOption" id="division10" onclick="changeMode('/', 10, '7', 'division10')">Division within 10</button>
18+
<button class="sidebarOption" id="add10" onclick="changeMode('+', 10, 'add10')">Addition within 10</button>
19+
<button class="sidebarOption" id="add100" onclick="changeMode('+', 1, 'add100')">Addition within 100</button>
20+
<button class="sidebarOption" id="add1000" onclick="changeMode('+', 0.1, 'add1000')">Addition within 1000</button>
21+
<button class="sidebarOption" id="subtraction10" onclick="changeMode('-', 10, 'subtraction10')">Subtraction within 10</button>
22+
<button class="sidebarOption" id="subtraction100" onclick="changeMode('-', 1, 'subtraction100')">Subtraction within 100</button>
23+
<button class="sidebarOption" id="subtraction1000" onclick="changeMode('-', 0.1, 'subtraction1000')">Subtraction within 1000</button>
24+
<button class="sidebarOption" id="multiplication10" onclick="changeMode('*', 10, 'multiplication10')">Multiplication within 10</button>
25+
<button class="sidebarOption" id="division10" onclick="changeMode('/', 10, 'division10')">Division within 10</button>
3226
</div>
3327
</div>
3428
<div id="overlay" onclick="closeSidebar()"></div>

‎script.js‎

Lines changed: 74 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,46 @@
11
// Functions
22

3-
function updateOptionLanguage(id, textCont, value) {
4-
document.getElementById(id).textContent = textCont;
5-
document.getElementById("select").querySelector(`option[value="${value}"]`).textContent = textCont;
6-
}
7-
8-
function updateLanguage(language, translations) {
3+
function updateLanguage() {
94
const t = translations[language];
10-
document.title = translations[language].title;
11-
document.getElementById("inputField").placeholder = t.placeholder;
12-
document.getElementById("checkButton").textContent = t.checkButton;
13-
document.getElementById("skipButton").textContent = t.skipButton;
14-
document.getElementById("skippedExamples").textContent = t.skippedExamples;
15-
document.getElementById("solvedExamples").textContent = t.solvedExamples;
16-
document.getElementById("mistakes").textContent = t.mistakes;
17-
updateOptionLanguage("add10", t.add10, "0");
18-
updateOptionLanguage("add100", t.add100, "1");
19-
updateOptionLanguage("add1000", t.add1000, "2");
20-
updateOptionLanguage("subtraction10", t.subtraction10, "3");
21-
updateOptionLanguage("subtraction100", t.subtraction100, "4");
22-
updateOptionLanguage("subtraction1000", t.subtraction1000, "5");
23-
updateOptionLanguage("multiplication10", t.multiplication10, "6");
24-
updateOptionLanguage("division10", t.division10, "7");
25-
document.getElementById("correctly").textContent = t.correctly;
26-
document.getElementById("wrongly").textContent = t.wrongly;
27-
document.getElementById("correctAnswerP").textContent = t.correctAnswerP;
5+
document.title = t.title;
6+
document.getElementById('inputField').placeholder = t.placeholder;
7+
document.getElementById('checkButton').textContent = t.checkButton;
8+
document.getElementById('skipButton').textContent = t.skipButton;
9+
document.getElementById('skippedExamples').textContent = t.skippedExamples;
10+
document.getElementById('solvedExamples').textContent = t.solvedExamples;
11+
document.getElementById('mistakes').textContent = t.mistakes;
12+
document.getElementById('add10').textContent = t.add10;
13+
document.getElementById('add100').textContent = t.add100;
14+
document.getElementById('add1000').textContent = t.add1000;
15+
document.getElementById('subtraction10').textContent = t.subtraction10;
16+
document.getElementById('subtraction100').textContent = t.subtraction100;
17+
document.getElementById('subtraction1000').textContent = t.subtraction1000;
18+
document.getElementById('multiplication10').textContent = t.multiplication10;
19+
document.getElementById('division10').textContent = t.division10;
20+
document.getElementById('correctly').textContent = t.correctly;
21+
document.getElementById('wrongly').textContent = t.wrongly;
22+
document.getElementById('correctAnswerP').textContent = t.correctAnswerP;
2823
}
2924

3025
function openSidebar() {
31-
document.getElementById("sidebar").classList.toggle("open");
32-
document.getElementById("overlay").classList.toggle("open");
26+
document.getElementById('sidebar').classList.toggle('open');
27+
document.getElementById('overlay').classList.toggle('open');
3328
}
3429

3530
function closeSidebar() {
36-
document.getElementById("sidebar").classList.remove("open");
37-
document.getElementById("overlay").classList.remove("open");
31+
document.getElementById('sidebar').classList.remove('open');
32+
document.getElementById('overlay').classList.remove('open');
3833
}
3934

4035
function generateExample() {
4136
a = Math.floor((Math.random() * 90 + 10) / variable);
4237
b = Math.floor((Math.random() * 90 + 10) / variable);
4338

44-
if (sign === "-") {
39+
if (sign === '-') {
4540
if (a < b) {
4641
[a, b] = [b, a];
4742
}
48-
} else if (sign === "/") {
43+
} else if (sign === '/') {
4944
a = a * b;
5045
}
5146
}
@@ -54,86 +49,86 @@ function resetCounters() {
5449
skipped = 0;
5550
solved = 0;
5651
mistakes = 0;
57-
document.getElementById("example").textContent = `${a}${sign}${b}=`;
58-
document.getElementById("inputField").value = "";
59-
document.getElementById("skippedExamples").textContent = `${skippedText} ${skipped}`;
60-
document.getElementById("solvedExamples").textContent = `${solvedText} ${solved}`;
61-
document.getElementById("mistakes").textContent = `${mistakesText} ${mistakes}`;
52+
document.getElementById('example').textContent = `${a}${sign}${b}=`;
53+
document.getElementById('inputField').value = '';
54+
document.getElementById('skippedExamples').textContent = `${skippedText} ${skipped}`;
55+
document.getElementById('solvedExamples').textContent = `${solvedText} ${solved}`;
56+
document.getElementById('mistakes').textContent = `${mistakesText} ${mistakes}`;
6257
}
6358

6459
function nextExample() {
6560
generateExample();
66-
document.getElementById("example").textContent = `${a}${sign}${b}=`;
67-
document.getElementById("inputField").value = "";
61+
document.getElementById('example').textContent = `${a}${sign}${b}=`;
62+
document.getElementById('inputField').value = '';
6863
}
6964

7065
function checkExample() {
7166
let correctAnswer;
7267

73-
if (sign === "+") {
68+
if (sign === '+') {
7469
correctAnswer = a + b;
75-
} else if (sign === "-") {
70+
} else if (sign === '-') {
7671
correctAnswer = a - b;
77-
} else if (sign === "*") {
72+
} else if (sign === '*') {
7873
correctAnswer = a * b;
79-
} else if (sign === "/") {
74+
} else if (sign === '/') {
8075
correctAnswer = a / b;
8176
}
8277

83-
if (Number(document.getElementById("inputField").value) === correctAnswer) {
84-
document.getElementById("correctlySound").play();
85-
document.getElementById("correctlyDiv").style.visibility = "visible";
78+
if (Number(document.getElementById('inputField').value) === correctAnswer) {
79+
document.getElementById('correctlySound').play();
80+
document.getElementById('correctlyDiv').style.visibility = 'visible';
8681
setTimeout(() => {
87-
document.getElementById("correctlyDiv").style.visibility = "hidden";
82+
document.getElementById('correctlyDiv').style.visibility = 'hidden';
8883
}, 1000);
8984
solved++;
90-
document.getElementById("solvedExamples").textContent = `${solvedText} ${solved}`;
85+
document.getElementById('solvedExamples').textContent = `${solvedText} ${solved}`;
9186
nextExample();
9287
}
93-
else if (document.getElementById("inputField").value === "") {
88+
else if (document.getElementById('inputField').value === '') {
9489
}
9590
else {
96-
document.getElementById("wronglySound").play();
97-
document.getElementById("wronglyDiv").style.visibility = "visible";
98-
document.getElementById("correctAnswerP").textContent = `${correctAnswerPText} ${correctAnswer}`;
91+
document.getElementById('wronglySound').play();
92+
document.getElementById('wronglyDiv').style.visibility = 'visible';
93+
document.getElementById('correctAnswerP').textContent = `${correctAnswerPText} ${correctAnswer}`;
9994
setTimeout(() => {
100-
document.getElementById("wronglyDiv").style.visibility = "hidden";
95+
document.getElementById('wronglyDiv').style.visibility = 'hidden';
10196
}, 1000);
10297
mistakes++;
103-
document.getElementById("mistakes").textContent = `${mistakesText} ${mistakes}`;
98+
document.getElementById('mistakes').textContent = `${mistakesText} ${mistakes}`;
10499
nextExample();
105100
}
106101
}
107102

108103
function skipExample() {
109104
skipped++;
110-
document.getElementById("skippedExamples").textContent = `${skippedText} ${skipped}`;
105+
document.getElementById('skippedExamples').textContent = `${skippedText} ${skipped}`;
111106
nextExample();
112107
}
113108

114-
function changeMode(newSign, newVariable, value, optionName) {
109+
function changeMode(newSign, newVariable, optionName) {
115110
sign = newSign;
116111
variable = newVariable;
117112

118-
document.getElementById("select").value = value;
113+
document.getElementById('modeName').textContent = translations[language][optionName];
119114

120115
generateExample();
121116
resetCounters();
122117
closeSidebar();
123118

124-
document.querySelectorAll(".sidebarOption").forEach(option => {
119+
document.querySelectorAll('.sidebarOption').forEach(option => {
125120
option.disabled = false;
126-
option.classList.remove("open");
121+
option.classList.remove('open');
127122
});
128123

129124
document.getElementById(optionName).disabled = true;
130-
document.getElementById(optionName).classList.toggle("open");
125+
document.getElementById(optionName).classList.toggle('open');
131126
}
132127

133-
document.addEventListener("keydown", function(event) {
134-
if (event.key === "Enter") {
135-
checkExample();
136-
}
128+
document.addEventListener('keydown', function(event) {
129+
if (event.key === 'Enter') {
130+
checkExample();
131+
}
137132
})
138133

139134
// App logic
@@ -146,20 +141,28 @@ let a, b, sign, variable;
146141
let skippedText, solvedText, mistakesText, correctAnswerPText;
147142

148143
const browserLanguage = navigator.language.slice(0, 2);
144+
let translations;
145+
let language;
149146

150-
fetch("translations.json")
147+
fetch('translations.json')
151148
.then(response => response.json())
152-
.then(translations => {
153-
if (translations[browserLanguage]) {
154-
updateLanguage(browserLanguage, translations);
149+
.then(data => {
150+
translations = data;
151+
if (translations[browserLanguage] && browserLanguage != 'en') {
152+
console.log(browserLanguage);
153+
language = browserLanguage;
154+
updateLanguage();
155+
} else {
156+
language = 'en';
157+
console.log('GGG');
155158
}
156159

157-
skippedText = document.getElementById("skippedExamples").textContent;
158-
solvedText = document.getElementById("solvedExamples").textContent;
159-
mistakesText = document.getElementById("mistakes").textContent;
160-
correctAnswerPText = document.getElementById("correctAnswerP").textContent;
160+
skippedText = document.getElementById('skippedExamples').textContent;
161+
solvedText = document.getElementById('solvedExamples').textContent;
162+
mistakesText = document.getElementById('mistakes').textContent;
163+
correctAnswerPText = document.getElementById('correctAnswerP').textContent;
161164

162-
changeMode("+", 1, "1", "add100");
165+
changeMode('+', 1, 'add100');
163166
})
164167
.catch(error => {
165168
console.error(error);

styles.css renamed to style.css

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,31 @@ html, body {
77
color: white;
88
background-color: rgb(36, 31, 49);
99
}
10-
p, .notification {
11-
font-family: sans-serif;
10+
p, input, button {
11+
font-family: "Noto Sans", sans-serif;
12+
font-weight: bold;
1213
}
1314
#example {
1415
display: flex;
1516
flex-grow: 1;
1617
align-items: center;
1718
margin: 0px;
1819
font-size: 48px;
19-
font-weight: bold;
20+
}
21+
input, button {
22+
border-radius: 10px;
23+
min-height: 50px;
24+
font-size: 16px;
2025
}
2126
input {
2227
color: black;
2328
background-color: rgb(246, 245, 244);
2429
border: 2px solid;
2530
border-color: rgb(145, 65, 172);
26-
border-radius: 10px;
27-
min-height: 50px;
28-
font-size: 16px;
29-
font-weight: bold;
3031
}
31-
button, select {
32+
button {
3233
color: white;
3334
border: none;
34-
border-radius: 10px;
35-
min-height: 50px;
36-
font-size: 16px;
37-
font-weight: bold;
3835
}
3936
#checkButton {
4037
background-color: rgb(145, 65, 172);
@@ -54,14 +51,16 @@ button, select {
5451
#skipButton:active {
5552
background-color: rgb(26, 95, 180);
5653
}
57-
select {
58-
background-color: rgb(145, 65, 172);
59-
}
60-
select:hover {
61-
background-color: rgb(129, 61, 156);
54+
#topbar {
55+
display: flex;
56+
flex-direction: row;
57+
align-items: center;
58+
height: 50px;
6259
}
63-
select:active {
64-
background-color: rgb(97, 53, 131);
60+
#openSidebarBtn {
61+
width: 50px;
62+
border-radius: 100px;
63+
background-color: rgb(36, 31, 49);
6564
}
6665
#sidebar {
6766
display: flex;
@@ -92,10 +91,10 @@ select:active {
9291
margin: 7px;
9392
background-color: rgb(36, 31, 49);
9493
}
95-
.sidebarOption:hover {
94+
.sidebarOption:hover, #openSidebarBtn:hover {
9695
background-color: rgb(61, 56, 70);
9796
}
98-
.sidebarOption:active {
97+
.sidebarOption:active, #openSidebarBtn:active {
9998
background-color: rgb(94, 92, 100);
10099
}
101100
.sidebarOption.open {
@@ -128,7 +127,7 @@ select:active {
128127
visibility: visible;
129128
opacity: 0.7;
130129
}
131-
input:focus, select:focus, button:focus {
130+
input:focus, button:focus {
132131
outline: none;
133132
}
134133
#counters {
@@ -140,13 +139,13 @@ input:focus, select:focus, button:focus {
140139
color: black;
141140
background-color: white;
142141
font-size: 16px;
143-
font-weight: bold;
144142
}
145143
#counters p {
146144
display: flex;
147145
align-items: center;
148146
flex-grow: 1;
149147
margin: 0px;
148+
margin-left: 7px;
150149
}
151150
.notification {
152151
display: flex;
@@ -157,8 +156,6 @@ input:focus, select:focus, button:focus {
157156
width: 100%;
158157
height: 100%;
159158
color: white;
160-
display: flex;
161-
font-weight: bold;
162159
justify-content: center;
163160
align-items: center;
164161
font-size: 48px;

0 commit comments

Comments
 (0)