renamed js folder
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Calcolatrice JS</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold;">← Dashboard</a>
|
||||
|
||||
<div class="calcolatrice">
|
||||
<input type="text" id="display" placeholder="Es: 10 + 5">
|
||||
|
||||
<div id="messaggio-errore" class="nascosto">⚠️ Formato errato! Usa: num spazio op spazio num</div>
|
||||
|
||||
<div class="tastiera">
|
||||
<button class="tasto">7</button>
|
||||
<button class="tasto">8</button>
|
||||
<button class="tasto">9</button>
|
||||
<button class="tasto op">/</button>
|
||||
|
||||
<button class="tasto">4</button>
|
||||
<button class="tasto">5</button>
|
||||
<button class="tasto">6</button>
|
||||
<button class="tasto op">*</button>
|
||||
|
||||
<button class="tasto">1</button>
|
||||
<button class="tasto">2</button>
|
||||
<button class="tasto">3</button>
|
||||
<button class="tasto op">-</button>
|
||||
|
||||
<button class="tasto" id="btn-cancella">C</button>
|
||||
<button class="tasto">0</button>
|
||||
<button class="tasto" id="btn-uguale">=</button>
|
||||
<button class="tasto op">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
// SELEZIONE ELEMENTI
|
||||
const display = document.querySelector('#display');
|
||||
const btnUguale = document.querySelector('#btn-uguale');
|
||||
const btnCancella = document.querySelector('#btn-cancella');
|
||||
const msgErrore = document.querySelector('#messaggio-errore');
|
||||
// Selezioniamo tutti i tasti "normali" (numeri e operazioni) per farli scrivere nel display
|
||||
const tasti = document.querySelectorAll('.tasto:not(#btn-uguale):not(#btn-cancella)');
|
||||
|
||||
// Array di operatori validi (utile per la validazione)
|
||||
const operatoriValidi = ['+', '-', '*', '/'];
|
||||
|
||||
|
||||
/**
|
||||
* 1. FUNZIONE: Aggiungi caratteri al display
|
||||
* Per ogni tasto, aggiungiamo un event listener che, quando cliccato,
|
||||
* prende il testo del tasto e lo aggiunge al display.
|
||||
* Bisono fare attenzione agli spazi per gli operatori.
|
||||
*
|
||||
* Passi:
|
||||
* - Per ogni tasto, aggiungiamo un event listener
|
||||
* - Quando clicchiamo, prendiamo il testo del tasto e lo aggiungiamo al display
|
||||
* - Se è un operatore, aggiungiamo spazi prima e dopo per facilitare il calcolo
|
||||
* - Altrimenti aggiungiamo solo il numero
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 2. FUNZIONE: Cancella display
|
||||
* Quando clicchiamo il tasto "C", il display deve essere svuotato.
|
||||
*
|
||||
* Passi:
|
||||
* - Aggiungiamo un event listener al tasto "C"
|
||||
* - Quando clicchiamo, svuotiamo il valore del display
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 3. FUNZIONE: Calcola
|
||||
* Prendiamo in input un numero, un operatore e un altro numero,
|
||||
* e restituiamo il risultato del calcolo in base all'operatore.
|
||||
* Se l'operatore non è valido, mostriamo un messaggio di errore.
|
||||
*
|
||||
* Passi:
|
||||
* - Prendiamo in input il primo numero, l'operatore e il secondo numero
|
||||
* - In base all'operatore, eseguiamo il calcolo
|
||||
* - Restituiamo il risultato
|
||||
* - Se l'operatore non è valido, mostriamo un messaggio di errore con mostraErrore() e restituiamo null
|
||||
* Nota: Si può usare uno switch per semplicità senza break (dato che restituiamo subito il risultato)
|
||||
*/
|
||||
function calcola(num1, operatore, num2) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 4. FUNZIONE: Calcola risultato
|
||||
* Quando clicchiamo il tasto "=", dobbiamo prendere il testo del display,
|
||||
* analizzarlo, eseguire il calcolo e mostrare il risultato.
|
||||
*
|
||||
* Passi:
|
||||
* A. Prendi il testo del display e puliscilo (rimuovi spazi inutili all'inizio e alla fine)
|
||||
* B. Spezza la stringa in parti (numero, operatore, numero) in base agli spazi
|
||||
* C. Valida i dati:
|
||||
* - Controlla che ci siano esattamente 3 pezzi
|
||||
* - Controlla che i numeri siano validi (trasforma e controlla non NaN)
|
||||
* - Controlla che l'operatore sia valido (tra quelli definiti)
|
||||
* D. Esegui il calcolo chiamando la funzione calcola()
|
||||
* E. Mostra il risultato nel display
|
||||
*/
|
||||
function calcolaRisultato() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/****************************************************/
|
||||
/********* FUNZIONI HELPER E EVENT LISTENER *********/
|
||||
/****************************************************/
|
||||
|
||||
function mostraErrore() {
|
||||
msgErrore.classList.remove('nascosto');
|
||||
display.style.borderColor = "red";
|
||||
setTimeout(() => {
|
||||
display.style.borderColor = "#bdc3c7";
|
||||
msgErrore.classList.add('nascosto');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Aggiungiamo gli event listener per il calcolo del risultato
|
||||
btnUguale.addEventListener('click', calcolaRisultato);
|
||||
// Permettiamo anche di premere "Enter" per calcolare
|
||||
display.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') calcolaRisultato();
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.calcolatrice {
|
||||
background: #ecf0f1;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#display {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
font-size: 1.5rem;
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
border: 2px solid #bdc3c7;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box; /* Importante per il padding */
|
||||
}
|
||||
|
||||
#messaggio-errore {
|
||||
color: red;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
height: 20px; /* Per non far saltare il layout */
|
||||
}
|
||||
|
||||
.nascosto {
|
||||
visibility: hidden; /* Nasconde ma tiene lo spazio */
|
||||
}
|
||||
|
||||
.tastiera {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* 4 colonne uguali */
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tasto {
|
||||
padding: 20px;
|
||||
font-size: 1.2rem;
|
||||
border: none;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.tasto:hover {
|
||||
background-color: #dfe6e9;
|
||||
}
|
||||
|
||||
.tasto.op {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tasto.op:hover {
|
||||
background-color: #e67e22;
|
||||
}
|
||||
|
||||
#btn-uguale {
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#btn-cancella {
|
||||
background-color: #c0392b;
|
||||
color: white;
|
||||
}
|
||||
Reference in New Issue
Block a user