Prosty kalkulator w przeglądarce

Uwaga: nie znaleziono pasujących materiałów w przesłanych plikach.

Opis

Czas wykorzystać zdobyte umiejętności w praktyce, tworząc prosty kalkulator działający w przeglądarce. Nasz kalkulator będzie brał dwie liczby od użytkownika i wykonywał na nich podstawowe operacje (dodawanie i odejmowanie).

Interfejs (HTML)

Potrzebujemy dwóch pól na liczby oraz przycisku (lub dwóch) do wywołania obliczenia wyniku. Możemy też dodać element do wyświetlenia wyniku.

Przykładowy HTML

<input type="number" id="liczba1" placeholder="Liczba 1">
<input type="number" id="liczba2" placeholder="Liczba 2">
<button id="dodajBtn">Dodaj</button>
<button id="odejmijBtn">Odejmij</button>
<p id="wynik"></p>

Tutaj dwa pola <input> oczekują liczb (atrybut type="number" ułatwi mobilne klawiatury i walidację HTML). Mamy dwa przyciski: "Dodaj" i "Odejmij", oraz paragraf na wyświetlenie wyniku.

Skrypt (JavaScript)

Musimy pobrać wpisane wartości, zamienić je na liczby, wykonać działanie i pokazać wynik. Do konwersji użyjemy parseInt (zakładamy liczby całkowite; dla liczb z przecinkiem można by użyć parseFloat).

Przykładowa implementacja

let pole1 = document.getElementById("liczba1");
let pole2 = document.getElementById("liczba2");
let wynikElem = document.getElementById("wynik");

document.getElementById("dodajBtn").addEventListener("click", function() {
    // Pobierz wartości i skonwertuj na liczby
    let a = parseInt(pole1.value);
    let b = parseInt(pole2.value);
    // Oblicz sumę
    let suma = a + b;
    // Wyświetl wynik
    wynikElem.textContent = "Wynik dodawania: " + suma;
});

document.getElementById("odejmijBtn").addEventListener("click", function() {
    let a = parseInt(pole1.value);
    let b = parseInt(pole2.value);
    let roznica = a - b;
    wynikElem.textContent = "Wynik odejmowania: " + roznica;
});

Przykład działania

Teraz, gdy użytkownik wpisze liczby i kliknie odpowiedni przycisk, w paragrafie wynik pojawi się wynik działania. Np. jeśli a=7, b=3 i kliknie "Dodaj", zobaczy "Wynik dodawania: 10". Po kliknięciu "Odejmij" zobaczy "Wynik odejmowania: 4".

Rozbudowa

Możemy ten kalkulator rozbudować o kolejne operacje (mnożenie, dzielenie) dodając więcej przycisków albo zmieniając interfejs tak, by wybierać rodzaj operacji z listy.

Ćwiczenia

1. Upewnij się, że kalkulator działa poprawnie dla różnych zestawów liczb. Przetestuj go m.in. na liczbach ujemnych oraz na przypadku, gdy obie liczby są zerem.
2. Dodaj do kalkulatora kolejne funkcje: mnożenie i dzielenie. Możesz dołożyć dwa nowe przyciski "Pomnóż" i "Podziel" i analogicznie obsłużyć ich kliknięcia w JavaScript.
3. Zaimplementuj prostą walidację w kalkulatorze: jeśli któreś pole jest puste lub nie wpisano liczby, wyświetl komunikat błędu zamiast wyniku (np. "Proszę podać dwie liczby!"). Podpowiedź: możesz sprawdzić pole1.value === "" lub użyć funkcji isNaN() na skonwertowanej wartości.
4. (Eksperyment) Zmień interfejs kalkulatora tak, by użyć tylko jednego przycisku "Oblicz" i pola wyboru operacji. Np. dodaj element <select> z opcjami "+", "-", "*", "/". W obsłudze kliknięcia "Oblicz" sprawdź, którą opcję wybrano (select.value) i na tej podstawie wykonaj odpowiednie działanie.