Zbuduj kalkulator używając JavaScript, HTML i CSS w 2022
Opublikowany: 2021-01-02Niezależnie od tego, czy uczysz się nowego języka programowania, czy frameworka programistycznego, nadchodzi czas, kiedy musisz pracować nad projektami w świecie rzeczywistym. W miarę postępów w temacie powinieneś sprawdzić swoje umiejętności i zrozumienie języka. Dobrym pomysłem jest budowanie projektu przy użyciu nowo poznanej technologii lub frameworka. W sieci dostępnych jest wiele pomysłów na to, co powinieneś stworzyć, korzystając ze swojej wiedzy.
Najczęściej spotykane sugestie to Kalkulator w JavaScript i Lista rzeczy do zrobienia. Chociaż wydają się łatwe, może to być dość trudne, gdy zaczniesz pracować nad tymi projektami. Tutaj sprawimy, że będzie to dla Ciebie łatwe i logiczne, a także pełne wydarzeń.
Mamy zacząć?
Spis treści
Logika przed wszystkim innym
Kiedy zaczynasz pracę nad projektem, niezależnie od tego, czy jest to kalkulator, czy lista rzeczy do zrobienia, pierwszą rzeczą, którą musisz zidentyfikować, jest logika.
Jak działa kalkulator?
- Dodajesz dwie lub więcej liczb (dowolną liczbę cyfr) za pomocą klawiszy numerycznych podanych na kalkulatorze.
- Następnie wykonujesz na tych liczbach podstawowe funkcje arytmetyczne, tj. dodawanie, odejmowanie, mnożenie i dzielenie.
- Kalkulator powinien być w stanie obliczyć i podać poprawne rozwiązania.
To jest założenie twojego kalkulatora. Potrzebujesz więc klawiatury, wyświetlacza i elementów funkcyjnych.
Przycisk „równa się” oceni odpowiedź, a przycisk „wyczyść” zapewni usunięcie wszystkich danych wejściowych z wyświetlacza kalkulatora.
Ucz się kursów rozwoju oprogramowania online z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.
Realizacja projektu: klucz do budowania kodeksu
Zamiast od razu przechodzić do kodu, musisz nauczyć się radzić sobie z nowym projektem. Masz dla siebie dwie rzeczy: logikę i podstawowe zrozumienie technologii front-end, czyli JavaScript, HTML i CSS.
Zanim zaczniesz tworzyć kalkulator przy użyciu JavaScript , potrzebujesz następujących informacji:
- Zintegrowane środowisko programistyczne, które pomoże Ci zbudować projekt przy użyciu wszystkich trzech technologii.
- Serwer lokalny, który pomoże Ci przetestować kody i usunąć błędy. Dzięki temu będziesz mógł szybciej i sprawniej uruchomić aplikację.
#1 Pierwsze kroki z HTML
Pierwszym krokiem jest ubrudzenie sobie rąk kodem HTML, aby zbudować zarys kalkulatora.
Na kalkulatorze znajduje się dziesięć przycisków, od 0 do 9. HTML odpowiada za budowanie kluczy dla każdej cyfry.
Oprócz tego będziesz musiał użyć HTML do tworzenia oddzielnych kluczy dla różnych funkcji arytmetycznych, a także podczas tworzenia kalkulatora przy użyciu JavaScript .
Możesz użyć HTML, aby dodać przycisk, aby wyświetlić wprowadzone cyfry lub wyniki, a także wyczyścić wyświetlacz.
Wizualna jednostka twojego kalkulatora jest całkowicie zależna od HTML i CSS, których przyciski i ich identyfikatory muszą być utworzone za pomocą HTML.
Kod płyty kotłowej
<!DOCTYPE html>
<html lang="pl">
<głowa>
<meta zestaw znaków=”UTF-8″>
<nazwa meta=”viewport” content=”width=szerokość-urządzenia, początkowa skala=1.0″>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>
<title>Kalkulator</title>
</head>
<ciało>
Aktualny kod tworzenia zarysu kalkulatora
(
<!– kalkulator –>
<div class=”kalkulator”>
<!– wyświetlacz –>
<input type=”text” class=”display” wyłączony>
<!– klawisze –>
<div class=”klucze”>
<!– 4 rzędy kluczy –>
<div class=”row”>
<button value=”7″>7</button>
<button value=”8″>8</button>
<button value=”9″>9</button>
<button value=”+” class=”operator”>+</button>
</div>
<div class=”row”>
<button value=”4″>4</button>
<button value=”5″>5</button>
<button value=”6″>6</button>
<button value=”-” class=”operator”>-</button>
</div>
<div class=”row”>
<button value="1″>1</button>
<button value=”2″>2</button>
<button value=”3″>3</button>
<button value=”*” class=”operator”>*</button>
</div>
<div class=”row”>
<button value=”C” class=”operator”>C</button>
<button value=”0″>0</button>
<button value=”/” class=”operator”>/</button>
<button value=”=” class=”operator”>=</button>
</div>
</div>
</div>
<!– końcówki korpusu kalkulatora –>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
Dowiedz się: 20 najlepszych projektów JavaScript na Github dla początkujących
#2 Styl z CSS
Po zdefiniowaniu struktury kalkulatora użyjesz wbudowanych elementów CSS, aby nadać mu styl i uczynić go atrakcyjnym wizualnie i łatwym w użyciu.
Chociaż wbudowany CSS jest doskonały, jeśli chodzi o projektowanie i stylizowanie wyglądu Twojej aplikacji, może nie być przyjazny dla SEO. Oprócz tego możesz również używać zewnętrznych elementów CSS, oznaczając je w tym samym katalogu głównym. Możesz nawet użyć wewnętrznych lub osadzonych elementów CSS, które są obecne w tagach <style></style> w sekcji head.
Tutaj przeprowadzimy Cię przez kod, którego możesz użyć do stylizacji kalkulatora.
(Jeśli chcesz, możesz tworzyć odmiany tego kodu).
/* wspólne style */
* {
wypełnienie: 0;
margines: 0;
}
ciało {
szerokość: 100vw;
wysokość: 100vh;
przelew: ukryty;
wyświetlacz: elastyczny;
uzasadnić-treść: centrum;
wyrównaj-elementy: środek;
kolor tła: #222831;
rodzina czcionek: bezszeryfowa;
}
/* wspólne style koniec */
/* kalkulator */
kalkulator {
szerokość: 300px;
dopełnienie-dolne: 15px;
promień obramowania: 7px;
kolor tła: #000;
box-shadow: 5px 8px 8px -2px rgba (0, 0, 0, 0,61);
}
/* koniec stylu kalkulatora */
/* wyświetlacz */
.wyświetlacz {
szerokość: 100%;
wysokość: 80px;
granica: brak;
rozmiar pudełka: obramowanie-pudełko;
wypełnienie: 10px;
rozmiar czcionki: 2rem;
kolor tła: #00ff44;
kolor: #000;
wyrównanie tekstu: do prawej;
obramowanie-górny-lewy-promień: 7px;
obramowanie-prawy-górny-promień: 7px;
}
/* koniec stylu wyświetlania */
/* wiersz */
.wiersz {
wyświetlacz: elastyczny;
uzasadnienie-treść: spacja-między;
}
/* koniec stylu wiersza */
/* przycisk */
przycisk {
szerokość: 50px;
wysokość: 50px;
promień graniczny: 50%;
granica: brak;
zarys: brak;
rozmiar czcionki: 1,5 rem;
kolor tła: #222;
kolor: #fff;
margines: 10px;
}
przycisk:najedź {
kursor: wskaźnik;
}
/* koniec stylu przycisku */
/* operator */
operator {
kolor tła: #00ff44;
kolor: #000;
}
/* koniec stylu operatora */
#3 Dodawanie funkcjonalności za pomocą JavaScript
Omówiliśmy teraz szczegółowo widoczne aspekty budowania kalkulatora przy użyciu JavaScript . Zróbmy kilka skryptów, aby pomóc w funkcjonowaniu kalkulatora i wykonywaniu zadań obliczeniowych. Zrozumiemy kilka kroków, które są związane z budowaniem kodu JS, co pomoże Ci szybciej go opracować.
- Będziesz musiał wywołać znaczniki HTML, które utworzyłeś dla poszczególnych funkcji za pomocą JavaScript. Użyjesz selektorów do wywołania każdego z tych wejść i zapisania ich w zmiennej. Dla każdej funkcji będziesz potrzebować zmiennej. Na przykład istnieje osobna zmienna do wyświetlania cyfr, funkcji kasującej oraz funkcji równej. W tym przypadku można użyć funkcji getElementbyID().
- Powiedzmy, że chcesz wykonać proste obliczenie 20+30, najpierw zadzwonisz do 20, używając metody wspomnianej powyżej. Przed wywołaniem 30 i funkcji arytmetycznej będziesz musiał gdzieś zapisać poprzednio wywołaną 20. Twój kod powinien zapewnić miejsce na tymczasowe przechowywanie liczb, aby ułatwić obliczenia. Pusta tablica będzie przechowywać liczbę jako ciąg. Po dodaniu drugiej liczby i funkcji arytmetycznej za pomocą funkcji eval() możesz ocenić liczby i uzyskać odpowiedź.
- Po kliknięciu przycisków w kalkulatorze chcesz uzyskać wyniki, albo są one wyświetlane, albo są oceniane. W tym celu należy dodać do kodu detektory zdarzeń. W ten sposób przyciski będą słuchać kliknięcia. Gdy dodasz funkcje do detektorów zdarzeń, automatycznie wykonają zadanie na dźwięk kliknięcia.
- Jednostka wyświetlania powinna zwracać wartość klikniętego przycisku. Możesz użyć obiektu event.target, ponieważ zwróci on wartość elementu, na którym wystąpiło zdarzenie. Na przykład chcesz, aby liczba „1” była wyświetlana zaraz po jej kliknięciu. W tym celu będziesz musiał zapisać liczbę w postaci zmiennej. Używając funkcji „if”, porównasz istniejącą zmienną, aby określić, czy ma ona wartość zero, czy nie. W przypadku, gdy jest to zero, dołączysz go do pustego ciągu, aby żadna liczba nie zaczynała się od zera. Na koniec dodasz zawartość klucza „1” do zmiennej wyświetlania. W rezultacie, gdy tylko naciśniesz klawisz numeryczny, zobaczysz zawartość w polu wyświetlacza.
- Na koniec musisz stworzyć funkcję, która pomoże zastosować operacje matematyczne na wyświetlanych liczbach. Upewnij się, że Twój kalkulator w JavaScript może z łatwością wykonywać obliczenia matematyczne. Aby włączyć tę funkcjonalność, możesz użyć kombinacji składni i metod. Określiliśmy poniżej kod elementów JavaScript do wglądu.
// wybierz wszystkie przyciski
const buttons = document.querySelectorAll('button');
// wybierz element <input type=”text” class=”display” wyłączony>
const display = document.querySelector('.display');
// dodaj EventListener do każdego przycisku
buttons.forEach(funkcja(przycisk) {
button.addEventListener('klik', oblicz);
});
// oblicz funkcję
funkcja oblicz(zdarzenie) {
// aktualna wartość klikniętych przycisków
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// sprawdź, czy wyświetlacz nie jest pusty, a następnie wykonaj tylko obliczenia
if (wyświetlana.wartość !== ”) {
// oblicz i pokaż odpowiedź do wyświetlenia
display.value = eval(display.value);
}
} else if (clickedButtonValue === 'C') {
// wyczyść wszystko na wyświetlaczu
wyśw.wartość = ”;
} w przeciwnym razie {
// w przeciwnym razie połącz go z wyświetlaczem
display.value += clickedButtonValue;
}
}
Trzeba przeczytać: Wyjaśnienie architektury i komponentów Java
Podsumowując
Niezależnie od tego, czy budujesz kalkulator w JavaScript , czy pracujesz nad bardziej złożonym projektem, chodzi o to, aby rozbić zawartość w logiczny i rozumiany sposób. Pomoże to uzyskać dokładną składnię i doprowadzi do płynnej aplikacji internetowej. Zamiast zaczynać bezpośrednio od kodowania, spróbuj zrozumieć, jaki jest prawdziwy cel technologii, której używasz, a to doprowadzi Cię do kodu.
Jeśli chcesz dowiedzieć się więcej o Java, tworzeniu oprogramowania typu full-stack, sprawdź program Executive PG UpGrad i IIIT-B w tworzeniu oprogramowania – specjalizacja w tworzeniu pełnego stosu, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznego szkolenia , 9+ projektów i zadań, status absolwentów IIIT-B, praktyczne praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.
