Crea una calcolatrice usando JavaScript, HTML e CSS nel 2022
Pubblicato: 2021-01-02Che tu stia imparando un nuovo linguaggio di programmazione o un framework di sviluppo, arriva il momento in cui devi lavorare su progetti nel mondo reale. Man mano che avanzi nell'argomento, dovresti testare le tue abilità e comprensione della lingua. Costruire un progetto utilizzando la tecnologia o il framework appena appreso è una buona idea. Ci sono molte idee disponibili online su cosa dovresti creare con le tue conoscenze.
I suggerimenti più comuni includono una calcolatrice in JavaScript e un elenco di cose da fare. Sebbene sembrino facili, può essere piuttosto un compito quando inizi a lavorare su questi progetti. Qui, lo renderemo facile e logico oltre che ricco di eventi per te.
Iniziamo?
Sommario
La logica prima di ogni altra cosa
Quando inizi a lavorare su un progetto, che sia una calcolatrice o una lista di cose da fare, la prima cosa che devi identificare è la logica.
Come funziona la calcolatrice?
- Si aggiungono due o più numeri (qualsiasi numero di cifre) utilizzando i tasti numerici forniti sulla calcolatrice.
- Quindi esegui le funzioni aritmetiche fondamentali, ovvero addizione, sottrazione, moltiplicazione e divisione su questi numeri.
- Il calcolatore dovrebbe essere in grado di calcolare e fornire le soluzioni corrette.
Questa è la premessa del tuo strumento calcolatrice. Quindi hai bisogno di una tastiera, un'unità display ed elementi funzionali.
Il pulsante "uguale a" valuterà la risposta mentre il pulsante "cancella" garantirà la rimozione di tutti gli input sul display della calcolatrice.
Impara i corsi di sviluppo software online dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzati o programmi di master per accelerare la tua carriera.
Affrontare il progetto: chiave per costruire il codice
Invece di andare subito al codice, devi imparare come affrontare un nuovo progetto. Hai due cose pronte per te: la logica e una comprensione di base delle tecnologie front-end, ovvero JavaScript, HTML e CSS.
Prima di iniziare a creare la calcolatrice utilizzando JavaScript , è necessario quanto segue:
- Un ambiente di sviluppo integrato che ti aiuterà a costruire il tuo progetto utilizzando tutte e tre le tecnologie.
- Un server locale che ti aiuterà a testare i tuoi codici e rimuovere i bug. Di conseguenza, sarai in grado di avviare l'applicazione più velocemente e con maggiore agilità.
#1 Guida introduttiva all'HTML
Il primo passo è sporcarsi un po' le mani con l'HTML in modo da aver costruito lo schema per la calcolatrice.
Ci sono dieci pulsanti sulla calcolatrice, che vanno da 0 a 9. HTML è responsabile della creazione delle chiavi per ogni cifra.
Oltre a questo, dovrai usare HTML per creare chiavi separate anche per le diverse funzioni aritmetiche quando costruisci una calcolatrice usando JavaScript .
È possibile utilizzare l'HTML per aggiungere il pulsante per visualizzare le cifre immesse o i risultati, nonché per cancellare la visualizzazione.
L'unità visiva della calcolatrice dipende interamente da HTML e CSS, di cui i pulsanti e i relativi ID devono essere creati utilizzando HTML.
Il codice caldaia
<!DOCTYPE html>
<html lang="it">
<testa>
<meta set di caratteri=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Calcolatrice</title>
</testa>
<corpo>
Il codice effettivo per la creazione dello schema della calcolatrice
(
<!– calcolatrice –>
<classe div="calcolatrice">
<!– display –>
<tipo di input=”testo” class=”display” disabilitato>
<!– tasti –>
<classe div="chiavi">
<!– 4 file di chiavi –>
<classe div="riga">
<valore pulsante=”7″>7</button>
<valore pulsante=”8″>8</button>
<valore pulsante=”9″>9</button>
<button value=”+” class=”operatore”>+</button>
</div>
<classe div="riga">
<valore pulsante=”4″>4</button>
<valore pulsante=”5″>5</button>
<valore pulsante=”6″>6</button>
<valore pulsante=”-” class=”operatore”>-</pulsante>
</div>
<classe div="riga">
<valore pulsante=”1″>1</pulsante>
<valore pulsante=”2″>2</pulsante>
<valore pulsante=”3″>3</button>
<button value=”*” class=”operatore”>*</button>
</div>
<classe div="riga">
<valore pulsante=”C” class=”operatore”>C</pulsante>
<valore pulsante=”0″>0</button>
<valore pulsante=”/” class=”operatore”>/</pulsante>
<valore pulsante=”=” class=”operatore”>=</pulsante>
</div>
</div>
</div>
<!– termina il corpo della calcolatrice –>
<tipo di script=”testo/javascript” src=”js/script.js”></script>
</corpo>
</html>
Impara: i 20 migliori progetti Javascript in Github per principianti
#2 Stile con CSS
Una volta definita la struttura della calcolatrice, utilizzerai gli elementi CSS in linea per modellare la calcolatrice e renderla visivamente accattivante e facile da usare.
Sebbene il CSS in linea sia eccellente quando si tratta di progettare e modellare l'aspetto della tua app, potrebbe non essere SEO friendly. Oltre a questo, puoi anche utilizzare elementi CSS esterni taggandoli nella stessa directory principale. Puoi anche utilizzare elementi CSS interni o incorporati che sono presenti nei tag <style></style> all'interno della sezione head.
Qui, ti guideremo attraverso il codice che puoi utilizzare per modellare la tua calcolatrice.
(Puoi creare variazioni a questo codice, se lo desideri.)
/* stili comuni */
* {
imbottitura: 0;
margine: 0;
}
corpo {
larghezza: 100vw;
altezza: 100vh;
overflow: nascosto;
display: flessibile;
giustificare-contenuto: centro;
allineare-elementi: centro;
colore di sfondo: #222831;
famiglia di caratteri: sans-serif;
}
/* gli stili comuni finiscono */
/* calcolatrice */
.calcolatore {
larghezza: 300px;
imbottitura-fondo: 15px;
raggio di confine: 7px;
colore di sfondo: #000;
box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
/* Fine stile calcolatrice */
/* Schermo */
.Schermo {
larghezza: 100%;
altezza: 80px;
confine: nessuno;
formato scatola: bordo-scatola;
imbottitura: 10px;
dimensione del carattere: 2rem;
colore di sfondo: #00ff44;
colore: #000;
allineamento del testo: a destra;
raggio di confine in alto a sinistra: 7px;
bordo-alto-destra-raggio: 7px;
}
/* stile di visualizzazione fine */
/* riga */
.riga {
display: flessibile;
giustificare-contenuto: spazio di mezzo;
}
/* fine stile riga */
/* pulsante */
pulsante {
larghezza: 50px;
altezza: 50px;
raggio di confine: 50%;
confine: nessuno;
contorno: nessuno;
dimensione del carattere: 1,5 rem;
colore di sfondo: #222;
colore: #fff;
margine: 10px;
}
pulsante: passa il mouse {
cursore: puntatore;
}
/* fine stile pulsante */
/* operatore */
.operatore {
colore di sfondo: #00ff44;
colore: #000;
}
/* fine stile operatore */
#3 Aggiunta di funzionalità con JavaScript
Abbiamo ora discusso in dettaglio gli aspetti visibili della creazione di una calcolatrice utilizzando JavaScript . Eseguiamo alcuni script per rendere funzionale la calcolatrice ed eseguire le attività di calcolo. Comprenderemo i pochi passaggi coinvolti nella creazione del codice JS, che ti aiuteranno a sviluppare il codice più velocemente.
- Dovrai chiamare i tag HTML che hai creato per le singole funzioni usando JavaScript. Utilizzerai i selettori per chiamare ciascuno di questi input e memorizzarli in una variabile. Per ogni funzione, avrai bisogno di una variabile. Ad esempio, esiste una variabile separata per la visualizzazione, le cifre, la funzione di cancellazione e la funzione uguale. In questo caso è possibile utilizzare la funzione getElementbyID().
- Diciamo che vuoi eseguire un semplice calcolo di 20+30, chiamerai prima 20 usando il metodo sopra menzionato. Prima di chiamare 30 e la funzione aritmetica, dovrai memorizzare da qualche parte il 20 precedentemente chiamato. Il tuo codice dovrebbe fare spazio per la memorizzazione temporanea dei numeri per facilitare i calcoli. Un array vuoto conterrà il numero come una stringa. Dopo aver aggiunto l'altro numero e la funzione aritmetica, usando eval(), puoi valutare i numeri e ottenere la risposta.
- Quando si fa clic sui pulsanti nella calcolatrice, si desidera che alcuni risultati vengano visualizzati o valutati. A questo scopo, dovresti aggiungere listener di eventi al tuo codice. In questo modo, i pulsanti ascolteranno il clic. Quando aggiungi funzioni ai listener di eventi, questi eseguiranno automaticamente l'attività sul suono del clic.
- L'unità di visualizzazione dovrebbe restituire il valore del pulsante su cui si fa clic. È possibile utilizzare l'oggetto event.target, poiché restituirà il valore dell'elemento su cui si è verificato l'evento. Ad esempio, vuoi che il numero "1" venga visualizzato non appena fai clic su di esso. Per questo, dovrai memorizzare il numero sotto forma di variabile. Usando la funzione "se", confronterai la variabile esistente per identificare se è zero o meno. Nel caso sia uno zero, lo aggiungerai a una stringa vuota in modo che nessun numero inizi con uno zero. Infine, si aggiungerà il contenuto del tasto “1” alla variabile di visualizzazione. Di conseguenza, non appena viene attivato il tasto numerico, vedrai il contenuto nella casella di visualizzazione.
- Infine, è necessario creare la funzione che aiuterà ad applicare le operazioni matematiche ai numeri visualizzati. Assicurati che la tua calcolatrice in JavaScript possa eseguire i calcoli matematici con facilità. Per abilitare questa funzionalità, puoi utilizzare una combinazione di sintassi e metodi. Abbiamo specificato il codice per gli elementi JavaScript di seguito per la tua lettura.
// seleziona tutti i pulsanti
pulsanti const = document.querySelectorAll('pulsante');
// seleziona l'elemento <input type=”text” class=”display” disabilitato>
const display = document.querySelector('.display');
// aggiungi eventListener a ciascun pulsante
pulsanti.perOgni(funzione(pulsante) {
button.addEventListener('clicca', calcola);
});
// calcola la funzione
funzione calcola(evento) {
// valore attuale dei pulsanti cliccati
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// controlla se il display non è vuoto, quindi esegui solo il calcolo
if (display.value !== ”) {
// calcola e mostra la risposta da visualizzare
display.value = eval(display.value);
}
} altrimenti se (clickedButtonValue === 'C') {
// cancella tutto sul display
display.value = ”;
} altro {
// altrimenti lo concateni al display
display.value += clickedButtonValue;
}
}
Da leggere: spiegazione dell'architettura e dei componenti Java
Riassumendo
Che tu stia costruendo una calcolatrice in JavaScript o lavorando su un progetto più complesso, l'idea è di scomporre i contenuti in modo logico e costruito. Questo ti aiuterà a ricavare la sintassi esatta e porterà a un'applicazione web fluida. Invece di iniziare direttamente con la codifica, cerca di capire qual è il vero scopo della tecnologia che stai utilizzando e ti condurrà al codice.
Se sei interessato a saperne di più su Java, lo sviluppo di software full-stack, dai un'occhiata al programma Executive PG di upGrad & IIIT-B in Software Development - Specializzazione in Full Stack Development, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa , oltre 9 progetti e incarichi, stato di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.
