Jak zbudować prosty kalkulator przy użyciu HTML, CSS i JavaScript
Najlepszym sposobem na naukę JavaScript jest tworzenie projektów. Jeśli chcesz zostać dobrym programistą internetowym, musisz jak najszybciej zacząć tworzyć projekty. Możesz zacząć od tworzenia projektów na poziomie początkującym, takich jak prosty kalkulator, zegar cyfrowy lub stoper.
Wykorzystując podstawowe technologie internetowe, takie jak HTML, CSS i JavaScript, można łatwo zbudować podstawowy kalkulator zdolny do wykonywania podstawowych operacji arytmetycznych, w tym dodawania, odejmowania, mnożenia i dzielenia.
Cechy kalkulatora
Celem tego przedsięwzięcia jest stworzenie zaawansowanego kalkulatora z następującymi możliwościami:
Urządzenie jest w stanie wykonywać podstawowe operacje matematyczne, takie jak dodawanie, odejmowanie, dzielenie i mnożenie.
⭐ Będzie wykonywać operacje dziesiętne.
Kalkulator wyświetla nieskończoność jako wynik przy próbie obliczenia wyniku dzielenia dowolnej wielkości przez wartość zero.
Wyszukiwarka nie udzieli odpowiedzi, jeśli wprowadzone wyrażenie zostanie uznane za nieprawidłowe. Na przykład wpisanie “5\+\\+9” nie przyniesie żadnych wyników.
Funkcja “Wyczyść ekran” umożliwia natychmiastowe usunięcie całej zawartości wyświetlacza, według uznania użytkownika.
Kod źródłowy wykorzystany w tym przedsięwzięciu został udostępniony za pośrednictwem repozytorium GitHub, które zezwala na jego bezpłatne wykorzystanie zgodnie z warunkami licencji MIT. Jeśli chcesz zapoznać się z działającym przykładem tego projektu, odwiedź naszą demonstrację.
Składniki kalkulatora
Kalkulator składa się z następujących komponentów:
Zestaw operacji matematycznych obejmuje dodawanie reprezentowane przez symbol “\+”, odejmowanie oznaczone jako “-”, mnożenie oznaczone przez “*” i dzielenie oznaczone przez “/”.
Przycisk cyfr i miejsc dziesiętnych składa się z cyfr od 0 do 9 oraz symbolu przecinka dziesiętnego (.).
Ekran wyświetlacza przedstawia wizualną reprezentację wyrażenia matematycznego i odpowiadającego mu wyniku.
Przycisk “Wyczyść ekran” jest przyjaznym dla użytkownika narzędziem, które umożliwia usunięcie wszystkich bieżących wyrażeń matematycznych z wyświetlacza, zapewniając świeżą kartę dla przyszłych obliczeń.
Przycisk “Oblicz” to polecenie, które oblicza wprowadzone wyrażenie matematyczne, powodując wyświetlenie wartości wyjściowej.
Struktura folderów projektu Kalkulator
Aby utworzyć interaktywną aplikację internetową kalkulatora, należy utworzyć główny katalog o nazwie “Kalkulator”. Katalog ten będzie zawierał różne istotne komponenty, takie jak pliki HTML, CSS i JavaScript. Nazwy tych plików mogą być wybrane według własnego uznania; jednak przestrzeganie ustalonych konwencji nazewnictwa dla każdego odpowiedniego typu pliku byłoby rozsądne. Zgodnie z typowymi praktykami, plik HTML powinien nosić tytuł “index.html”, podczas gdy towarzyszący mu plik CSS powinien być oznaczony jako “styles.css”, a plik JavaScript powinien nazywać się “script.js”. Ogólnie zaleca się przestrzeganie zarówno standardów nazewnictwa JavaScript, jak i HTML/CSS w celu zapewnienia spójności i ułatwienia płynnej współpracy między programistami.
Dodawanie struktury do kalkulatora za pomocą HTML
Otwórz plik “index.html” i wstaw dostarczony kod HTML dla kalkulatora w następujący sposób:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator" >
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="\\+" onclick="display('\\+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Niniejsze przedsięwzięcie wykorzystuje atag do ustalenia ogólnej konfiguracji kalkulatora. W jego obrębie znajduje się pięć znaczników, z których każdy reprezentuje poziomą sekcję kalkulatora. Każdy z nich ma swój własny odpowiadający mu znacznik, wewnątrz którego znajdują się znaczniki obejmujące ekran wyświetlacza i klawisze funkcyjne kalkulatora.
Stylizacja kalkulatora za pomocą CSS
Otwórz plik “styles.css” i wstaw kolejny kod CSS, aby zaimplementować kalkulator na stronie internetowej:
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
Dostarczony kod definiuje niestandardowy znacznik HTML “calc”, który reprezentuje interfejs kalkulatora, w tym przyciski dla różnych operacji matematycznych, takich jak dodawanie, odejmowanie, mnożenie, dzielenie, wyczyść i równa się. Zawiera również pola wejściowe dla dwóch liczb i znaku równości. Etykieta przycisku jest wyświetlana na górze każdego przycisku przy użyciu pozycjonowania bezwzględnego w jego własnym elemencie div, który ma zastosowany promień wypełnienia i obramowania. Dodatkowo wykorzystuje klasy CSS Tailwind, takie jak flex, px-4, py-2, rounded-md, bg-white, text-red-500, hover:bg-gray-100, focus:outline-none i transition do stylizacji wyglądu tagu calc.Wreszcie, importuje rodzinę czcionek Orbitron z Google Fonts za pomocą “@import
Dodawanie funkcjonalności do kalkulatora za pomocą JavaScript
Zmodyfikuj istniejący plik “script.js”, włączając dostarczony kod JavaScript, aby zwiększyć funkcjonalność podstawowego kalkulatora w następujący sposób:
// This function clears all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function displays the values
function display(value) {
document.getElementById("result").value \\+= value;
}
// This function evaluates the expression and returns the result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Zrozumienie kodu JavaScript
Wyżej wymienione funkcje nadają kalkulatorowi określone możliwości, w tym odpowiednio kasowanie ekranu, wizualną prezentację danych wyjściowych i wykonywanie operacji matematycznych.
Czyszczenie wartości
Funkcja clearScreen() wykorzystuje identyfikator elementu o określonym ID, znany jako “wynik”, w celu uzyskania dostępu do modelu DOM (Document Object Model) i zmodyfikowania jego zawartości poprzez ustawienie go na pusty ciąg znaków. Proces ten jest powszechnie określany jako manipulowanie DOM. Różne części strony internetowej mogą być dostępne i modyfikowane za pomocą selektorów DOM, które są specyficznymi kodami identyfikującymi określone elementy w hierarchii DOM w celu zmiany ich właściwości lub zawartości.
function clearScreen() {
document.getElementById("result").value = "";
}
Wyświetlanie wartości
Implementacja funkcji display() obejmuje dostęp do obiektowego modelu dokumentu (DOM) poprzez identyfikator powiązany z wybraną opcją, a następnie dołączenie odpowiedniej wartości do zidentyfikowanego elementu w DOM.
function display(value) {
document.getElementById("result").value \\+= value;
}
Ocena wyrażenia
Funkcja calculate() pobiera obliczoną wartość wyrażenia, uzyskując dostęp do obiektowego modelu dokumentu (DOM) przy użyciu identyfikatora określonego elementu, a następnie wykorzystując funkcję eval() do oceny wyrażenia. Następnie obliczony wynik jest ponownie przypisywany do wyznaczonego elementu.
Funkcja JavaScript evaluate() służy do obliczania danego wyrażenia, które jest dostarczane jako dane wejściowe do funkcji, a następnie daje wynik uzyskany z takiego wyrażenia.
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Rozwijaj fajne projekty programistyczne
Jednym ze skutecznych sposobów na zwiększenie biegłości w programowaniu jest podjęcie się opracowania projektu, niezależnie od tego, czy jest się nowicjuszem, czy powraca do kodowania po dłuższej przerwie. Pomyślne ukończenie i wdrożenie funkcjonalnych aplikacji, w tym tych o podstawowej funkcjonalności, może wzmocnić pewność siebie.
Rzeczywiście, istnieje mnóstwo dostępnych przedsięwzięć, od zajęć rekreacyjnych, takich jak szachy i kółko i krzyżyk, po praktyczne narzędzia, takie jak listy rzeczy do zrobienia, konwertery wag i liczniki czasu, z którymi można eksperymentować.
Zanurz się w tych projektach, aby poprawić swoje umiejętności programistyczne, zdobywając praktyczne doświadczenie poprzez praktyczną naukę.