<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Kalkulator</title>
</head>
<body>
<div id="container">
<div id="calculator">
<input type="text" id="number-first" class="fields" required />
<input type="text" id="number-second" class="fields" required />
<select id="choose-option">
<option value="dodawanie" id="dodawanie">Dodaj</option>
<option value="odejmowanie" id="odejmowanie">Odejmij</option>
<option value="mnożenie" id="mnożenie">Pomnóż</option>
<option value="dzielenie" id="dzielenie">Podziel</option>
</select>
<button id="calculate">Zmień treść</button>
</div>
<p id="description">hej</p>
</div>
<script>
const liczba1 = document.querySelector("#number-first");
const liczba2 = document.querySelector("#number-second");
const wybierz = document.querySelector("#choose-option");
const przycisk = document.querySelector("#calculate");
const wynik = document.querySelector("#description");
function countNumbers(a, b) {
if (wybierz.value === "dodawanie") {
return (wynik.innerHTML = Number(a) + Number(b));
} else if (wybierz.value === "odejmowanie") {
return (wynik.innerHTML = a - b);
} else if (wybierz.value === "mnożenie") {
return (wynik.innerHTML = a * b);
} else if (wybierz.value === "dzielenie") {
return (wynik.innerHTML = a / b);
}
}
przycisk.addEventListener("click", function (e) {
if (isNaN(Number(liczba1.value)) && isNaN(Number(liczba2.value))) {
liczba1.classList.add("invalid");
liczba2.classList.add("invalid");
return (wynik.innerHTML =
"Błąd: Liczba A nie jest prawidłową liczbą. Błąd: Liczba B nie jest prawidłową liczbą.");
} else if (isNaN(Number(liczba1.value))) {
liczba1.classList.add("invalid");
liczba2.classList.remove("invalid");
return (wynik.innerHTML =
"Błąd: Liczba A nie jest prawidłową liczbą.");
} else if (isNaN(Number(liczba2.value))) {
liczba2.classList.add("invalid");
liczba1.classList.remove("invalid");
return (wynik.innerHTML =
"Błąd: Liczba B nie jest prawidłową liczbą.");
} else {
liczba1.classList.remove("invalid");
liczba2.classList.remove("invalid");
return (wynik.innerHTML = countNumbers(liczba1.value, liczba2.value));
}
});
</script>
</body>
</html>
#calculator {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 600px;
}
#container p {
text-align: center;
}
#container {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
width: 600px;
border-radius: 15px;
margin: 100px auto 0 auto;
padding-bottom: 5px;
padding-top: 30px;
}
.invalid {
border: 2px solid #d93025;
background-color: #fff6f6;
color: red;
}