Construiește un Calculator folosind JavaScript, HTML și CSS în 2022
Publicat: 2021-01-02Indiferent dacă înveți un nou limbaj de programare sau un cadru de dezvoltare, vine un moment în care trebuie să lucrezi la proiecte din lumea reală. Pe măsură ce avansați prin subiect, ar trebui să vă testați abilitățile și înțelegerea limbii. Construirea unui proiect folosind tehnologia sau cadrul nou învățat este o idee bună. Există o mulțime de idei disponibile online cu privire la ceea ce ar trebui să creați cu cunoștințele dvs.
Cele mai des întâlnite sugestii includ un Calculator în JavaScript și Lista de activități. Deși par ușoare, poate fi o sarcină destul de mare atunci când începeți să lucrați la aceste proiecte. Aici, îl vom face ușor și logic, precum și plin de evenimente pentru tine.
Să începem?
Cuprins
Logica înainte de orice altceva
Când începi să lucrezi la un proiect, fie că este un calculator sau o listă de lucruri de făcut, primul lucru pe care trebuie să-l identifici este logica.
Cum funcționează calculatorul?
- Adaugă două sau mai multe numere (orice număr de cifre) utilizând tastele numerice date pe calculator.
- Apoi executați funcții aritmetice fundamentale, adică adunarea, scăderea, înmulțirea și împărțirea acestor numere.
- Calculatorul ar trebui să fie capabil să calculeze și să ofere soluțiile corecte.
Aceasta este premisa instrumentului dvs. de calculator. Deci, aveți nevoie de o tastatură, o unitate de afișare și elemente funcționale.
Butonul „egal cu” va evalua răspunsul, în timp ce butonul „Șterge” va asigura eliminarea tuturor intrărilor de pe afișajul calculatorului.
Învață cursuri online de dezvoltare software de la cele mai bune universități din lume. Câștigă programe Executive PG, programe avansate de certificat sau programe de master pentru a-ți accelera cariera.
Abordarea proiectului: cheia construirii codului
În loc să vă îndreptați imediat către cod, trebuie să învățați cum să abordați un nou proiect. Aveți două lucruri pregătite pentru dvs.: logica și înțelegerea de bază a tehnologiilor front-end, adică JavaScript, HTML și CSS.
Înainte de a începe să construiți calculatorul folosind JavaScript , aveți nevoie de următoarele:
- Un mediu de dezvoltare integrat care vă va ajuta să vă construiți proiectul folosind toate cele trei tehnologii.
- Un server local care vă va ajuta să vă testați codurile și să eliminați erorile. Drept urmare, vei putea lansa aplicația mai rapid și cu o mai mare agilitate.
#1 Noțiuni introductive cu HTML
Primul pas este să-ți murdărești puțin mâinile cu HTML, astfel încât să fi construit conturul calculatorului tău.
Există zece butoane pe calculator, variind de la 0 la 9. HTML este responsabil pentru construirea cheilor pentru fiecare cifră.
În afară de aceasta, va trebui să utilizați HTML pentru a crea chei separate pentru diferitele funcții aritmetice, precum și atunci când construiți un calculator folosind JavaScript .
Puteți folosi HTML pentru a adăuga butonul pentru a afișa cifrele introduse sau rezultatele, precum și pentru a șterge afișajul.
Unitatea vizuală a calculatorului dumneavoastră depinde în întregime de HTML și CSS, dintre care butoanele și ID-urile lor trebuie create folosind HTML.
Codul standard
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="UTF-8">
<meta name="viewport” content="width=device-width, initial-scale=1.0″>
<link rel="stylesheet” type="text/css” href="css/styles.css”>
<title>Calculator</title>
</cap>
<corp>
Codul real pentru crearea schiței calculatorului
(
<!– calculator –>
<div class="calculator">
<!– afișaj –>
<input type=”text” class=”display” dezactivat>
<!– taste –>
<div class="keys">
<!– 4 rânduri de chei –>
<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>
<!– corpul calculatorului se termină –>
<script type="text/javascript” src="js/script.js”></script>
</corp>
</html>
Aflați: Top 20 de proiecte Javascript în Github pentru începători
#2 Stil cu CSS
Odată ce ați definit structura calculatorului, veți folosi elementele CSS inline pentru a vă stila calculatorul și pentru a-l face atrăgător din punct de vedere vizual și ușor de utilizat.
În timp ce CSS inline este excelent când vine vorba de proiectarea și stilarea aspectului aplicației dvs., este posibil să nu fie prietenos cu SEO. În afară de aceasta, puteți utiliza și elemente CSS externe etichetându-le în același director rădăcină. Puteți folosi chiar și elemente CSS interne sau încorporate care sunt prezente în etichetele <style></style> din secțiunea head.
Aici, vă vom ghida prin codul pe care îl puteți utiliza pentru a vă stila calculatorul.
(Dacă doriți, puteți crea variante ale acestui cod.)
/* stiluri comune */
* {
umplutură: 0;
marja: 0;
}
corp {
latime: 100vw;
inaltime: 100vh;
preaplin: ascuns;
display: flex;
justificare-conținut: centru;
alinierea elementelor: centru;
culoare de fundal: #222831;
familie de fonturi: sans-serif;
}
/* se termină stilurile comune */
/* calculator */
.calculator {
latime: 300px;
umplutură-partea inferioară: 15px;
chenar-rază: 7px;
culoare de fundal: #000;
box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
/* sfârșitul stilului calculatorului */
/* afișare */
.afisare {
latime: 100%;
înălțime: 80px;
chenar: niciunul;
dimensionare cutie: chenar-cutie;
umplutură: 10px;
dimensiunea fontului: 2rem;
culoare de fundal: #00ff44;
culoare: #000;
text-align: dreapta;
chenar-sus-stânga-rază: 7px;
chenar-sus-dreapta-rază: 7px;
}
/* sfârșitul stilului de afișare */
/* rând */
.rând {
display: flex;
justificare-conținut: spațiu-între;
}
/* sfârșitul stilului de rând */
buton /* */
butonul {
latime: 50px;
înălțime: 50px;
raza-limită: 50%;
chenar: niciunul;
contur: niciunul;
dimensiunea fontului: 1.5rem;
culoare de fundal: #222;
culoare: #fff;
marja: 10px;
}
butonul:hover {
cursor: pointer;
}
/* sfârșitul stilului butonului */
/* operator */
.operator {
culoare de fundal: #00ff44;
culoare: #000;
}
/* sfârşitul stilului operatorului */
# 3 Adăugarea de funcționalități cu JavaScript
Am discutat acum în detaliu aspectele vizibile ale construirii unui calculator folosind JavaScript . Să facem niște scripturi pentru a ajuta calculatorul să funcționeze și pentru a efectua sarcinile de calcul. Vom înțelege câțiva pași implicați în construirea codului JS, care vă vor ajuta să dezvoltați codul mai rapid.
- Va trebui să apelați etichetele HTML pe care le-ați creat pentru funcții individuale folosind JavaScript. Veți folosi selectoare pentru a apela fiecare dintre aceste intrări și pentru a le stoca într-o variabilă. Pentru fiecare funcție, veți avea nevoie de o variabilă. De exemplu, există o variabilă separată pentru afișare, cifrele, funcția de ștergere, precum și funcția egală cu. Funcția getElementbyID() poate fi utilizată în acest caz.
- Să presupunem că doriți să efectuați un calcul simplu de 20+30, veți apela mai întâi la 20 folosind metoda menționată mai sus. Înainte de a apela 30 și funcția aritmetică, va trebui să stocați undeva 20 numit anterior. Codul dvs. ar trebui să facă spațiu pentru stocarea temporară a numerelor pentru a face calculele mai ușoare. O matrice goală va reține numărul ca șir. După ce ați adăugat celălalt număr și funcția aritmetică, folosind eval(), puteți evalua numerele și obțineți răspunsul.
- Când dați clic pe butoanele din calculator, doriți niște rezultate, fie sunt afișate, fie sunt evaluate. În acest scop, ar trebui să adăugați ascultători de evenimente la codul dvs. În acest fel, butoanele vor asculta clicul. Când adăugați funcții la ascultătorii de evenimente, aceștia vor îndeplini automat sarcina pe sunetul de clic.
- Unitatea de afișare ar trebui să returneze valoarea butonului pe care faceți clic. Puteți utiliza obiectul event.target, deoarece va returna valoarea elementului pe care a avut loc evenimentul. De exemplu, doriți ca numărul „1” să fie afișat imediat ce faceți clic pe el. Pentru aceasta, va trebui să stocați numărul sub forma unei variabile. Folosind funcția „dacă”, veți compara variabila existentă pentru a identifica dacă este zero sau nu. În cazul în care este un zero, atunci îl veți adăuga la un șir gol, astfel încât niciun număr să nu înceapă cu un zero. În cele din urmă, veți adăuga conținutul tastei „1” la variabila de afișare. Ca rezultat, de îndată ce tasta numerică este declanșată, veți vedea conținutul în caseta de afișare.
- În cele din urmă, trebuie să creați funcția care va ajuta la aplicarea operațiilor matematice la numerele afișate. Asigurați-vă că calculatorul dvs. în JavaScript poate efectua calculele matematice cu ușurință. Pentru a activa această funcționalitate, puteți utiliza o combinație de sintaxe și metode. Am specificat codul pentru elementele JavaScript de mai jos pentru a le citi.
// selectează toate butoanele
const butoane = document.querySelectorAll('button');
// selectați elementul <input type="text” class="display" disabled>
const display = document.querySelector('.display');
// adaugă eventListener la fiecare buton
buttons.forEach(funcție(button) {
button.addEventListener('click', calculate);
});
// calculează funcția
function calculate(eveniment) {
// valoarea actuală a butoanelor pe care se face clic
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// verifică dacă afișajul nu este gol, apoi faceți doar calculul
if (display.value !== ”) {
// calculează și arată răspunsul de afișat
display.value = eval(display.value);
}
} else if (clickedButtonValue === 'C') {
// șterge tot ce este afișat
afisare.valoare = ”;
} altfel {
// în caz contrar, concatenează-l pe afișaj
display.value += clickedButtonValue;
}
}
Trebuie citit: Arhitectura Java și componentele explicate
Rezumând
Indiferent dacă construiți un calculator în JavaScript sau lucrați la un proiect mai complex, ideea este să descompuneți conținutul într-o manieră logică și interpretată. Acest lucru vă va ajuta să obțineți sintaxa exactă și va duce la o aplicație web fluidă. În loc să începeți direct cu codificarea, încercați să înțelegeți care este scopul real al tehnologiei pe care o utilizați și aceasta vă va conduce la cod.
Dacă sunteți interesat să aflați mai multe despre Java, dezvoltarea de software full-stack, consultați programul Executive PG în dezvoltare software de la upGrad și IIIT-B – Specializare în dezvoltare full-stack, care este conceput pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă. , peste 9 proiecte și sarcini, statutul de absolvenți IIIT-B, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.
