🧮 Sviluppo Web

Guida completa e spiegata al codice di index.html nella repository privata

Questa guida mostra tutto il codice del file index.html della calcolatrice, spiegando ogni singolo pezzo. È pensata per chi vuole capire come è stata realizzata la calcolatrice e come funziona ogni parte del codice.

Puoi esplorare il codice sorgente completo e clonare il progetto: Repository GitHub Calcolatrice Web

---

Codice completo con spiegazione riga per riga

Intestazione e dichiarazione documento

<!DOCTYPE html>

Riga 1
Dichiara che il file è un documento HTML5.

<html lang="en">

Riga 2
Apre il tag HTML e indica che la lingua della pagina è inglese.

Sezione <head>

<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>

Righe 3-5

• <meta charset="UTF-8"> imposta la codifica dei caratteri su UTF-8.
• <title> specifica il titolo che appare nella scheda del browser.

Stili CSS interni

<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

Righe 6-14
Il CSS qui centra il contenuto verticalmente e orizzontalmente e imposta lo sfondo grigio chiaro. Il font usato è Arial.

.calculator {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
width: 300px;
}

Righe 15-21
Stilizza il box della calcolatrice: sfondo bianco, padding interno, bordi arrotondati, ombra e larghezza fissa.

#display {
width: 100%;
height: 40px;
font-size: 1.5em;
margin-bottom: 10px;
padding: 8px;
text-align: right;
border: 1px solid #ddd;
border-radius: 6px;
background: #f9f9f9;
}

Righe 22-32
Stile dell'input dove vengono mostrati numeri e risultati: grande, allineato a destra, bordi arrotondati, colore di sfondo chiaro.

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

Righe 33-37
Imposta la griglia dei pulsanti (4 colonne) e la spaziatura tra di essi.

button {
padding: 15px;
font-size: 1em;
border: none;
border-radius: 6px;
background: #ececec;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: #d1d1d1;
}

Righe 38-49
Stile di tutti i pulsanti: dimensioni, colori, bordo arrotondato, effetto hover.

.operator {
background: #ffd966;
}

Righe 50-52
Stile per i pulsanti degli operatori matematici (colore giallo chiaro).

.equal {
background: #98e698;
grid-column: span 2;
}

Righe 53-56
Stile per il pulsante "=" (colore verde chiaro, occupa 2 colonne).

.clear {
background: #ff9999;
grid-column: span 2;
}
</style>
</head>

Righe 57-62
Stile per il pulsante "C" (cancella, colore rosso chiaro, occupa 2 colonne).

---

Corpo della pagina <body>

<body>
<div class="calculator">
<input type="text" id="display" readonly>

Righe 63-65

• <div class="calculator">: contenitore principale.
• <input id="display" readonly>: campo di testo dove appaiono numeri, operazioni e risultati. readonly impedisce la modifica manuale.

Griglia dei pulsanti

<div class="buttons">
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button class="operator" onclick="append('/')">÷</button>
<button onclick="append('4')">4</button>
<button onclick="append('5')">5</button>
<button onclick="append('6')">6</button>
<button class="operator" onclick="append('*')">×</button>
<button onclick="append('1')">1</button>
<button onclick="append('2')">2</button>
<button onclick="append('3')">3</button>
<button class="operator" onclick="append('-')">−</button>
<button onclick="append('0')">0</button>
<button onclick="append('.')">.</button>
<button class="operator" onclick="append('+')">+</button>
<button class="clear" onclick="clearDisplay()">C</button>
<button class="equal" onclick="calculate()">=</button>
</div>

Righe 66-84

• Ogni <button> aggiunge un numero, un operatore, cancella o calcola il risultato.
• Gli operatori hanno la classe operator per lo stile.
• "C" cancella il display, "=" calcola il risultato.

---

Funzioni JavaScript

<script>
const display = document.getElementById('display');

Riga 87
Collega la variabile display all'input dove vengono mostrati i valori.

function append(char) {
display.value += char;
}

Righe 89-91
La funzione append(char) aggiunge il carattere premuto (numero, punto, operatore) al display.

function clearDisplay() {
display.value = '';
}

Righe 93-95
La funzione clearDisplay() cancella il contenuto del display.

function calculate() {
try {
// Replace division and multiplication symbols for JS eval
let expr = display.value.replace(/÷/g, '/').replace(/×/g, '*');
display.value = eval(expr);
} catch (e) {
display.value = 'Error';
}
}

Righe 97-105
La funzione calculate():

• Sostituisce i simboli ÷ e × con / e * per compatibilità con JavaScript.
• Valuta l'espressione (tramite eval) e mostra il risultato.
• Se l'operazione non è valida, mostra "Error".

</script>
</body>
</html>

Righe 106-108
Chiude lo script, il corpo e il documento HTML.

---

Riepilogo finale

• Struttura: Tutto in un solo file (index.html), include HTML, CSS e JavaScript.
• HTML: Definisce la struttura della calcolatrice e dei pulsanti.
• CSS: Gestisce l'aspetto grafico, la centratura, i colori e il layout.
• JavaScript: Gestisce l'interazione, l'inserimento dei valori, la cancellazione e il calcolo.

---

Questa guida permette di vedere e comprendere ogni singola parte del codice che compone la calcolatrice.

❓ Domande Frequenti (FAQ Tecniche)

Risposte sintetiche ai dubbi architetturali e operativi più frequenti su questo argomento.

Perché evitare l'uso della funzione eval() nei calcolatori JavaScript?

eval() rappresenta un grave rischio di sicurezza (esecuzione arbitraria di codice malizioso XSS) ed è notevolmente più lenta a causa dell'impossibilità di ottimizzazione JIT da parte del motore V8.

Come gestire la precisione aritmetica con numeri decimali a virgola mobile in JS?

Utilizzando l'arrotondamento tramite Number.EPSILON o lavorando su centesimi interi (fixed-point arithmetic) per prevenire le classiche discrepanze IEEE 754 (es. 0.1 + 0.2 != 0.3).

Cos'è l'Event Delegation e perché è utile in una griglia di pulsanti?

Consiste nell'agganciare un unico listener sull'elemento genitore (la griglia dei bottoni) sfruttando l'event bubbling per intercettare i click sui singoli tasti, ottimizzando memoria e prestazioni DOM.

Guide Tecniche Correlate 🔗

Sviluppo Videogioco 2D Pong con Canvas HTML5

Game loop a 60 FPS, coordinate cartesiane e fisica delle collisioni.

Leggi la Guida →

Architettura Siti Statici con GitHub Pages

Markup semantico HTML5, styling responsive e deploy gratuito Jamstack.

Leggi la Guida →

Guida Completa alla Programmazione Python

Fondamenti di logica algoritmica, variabili e strutture dati.

Leggi la Guida →