Calcolatrice
/index.html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/stile.css">
<title>Calcolatrice</title>
</head>
<body>
<div id="calcolatrice" class="calcolatrice">
<div class="testata">
<img alt="Logo" src="img/conte.svg" />
<span>Calcolatrice</span>
</div>
<div class="carta">
<div id="immissione" class="immissione">0</div>
</div>
<div class="tastiera">
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-azione="cancella">C</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="(">(</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione=")">)</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione='+'>+</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-azione="1">1</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="2">2</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="3">3</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="-">−</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-azione="4">4</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="5">5</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="6">6</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="*">×</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-azione="7">7</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="8">8</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="9">9</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="/">÷</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-azione="backspace">⌫</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="0">0</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione=".">,</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-azione="calcola">=</button>
</div>
</div>
</div>
</div>
<script>
// Quando l'utente preme i tasti visualizziamo il risultato
// componendo qui il risultato della digitazione
var campoImmisione = document.getElementById('immissione');
// Azione svolta wuando viene premuto untasto (cliccato con il mouse
// su un computer, toccato su uno smartphone)
function tastoPremuto() {
// this contine il riferimento all'elemento "colpito" dall'evento
var tasto = this;
// azione contine il valore dell'attributo "dara-azione" del tasto cliccato
var azione = tasto.getAttribute('data-azione');
// Copio nella variabile espressione il contenuto dell'elemento con id immissione
var espressione = campoImmisione.innerHTML;
// A secondo del testo premuto eseguo l'azione relativa
if (azione == 'calcola') {
// Calcola il risultato
try {
var temp = eval(espressione);
espressione = temp;
}
catch (e) {
espressione = 'Errore: ' + e;
}
} else if (azione == 'backspace') {
// Elimina ultimo carattere immesso
espressione = espressione.substr(0, espressione.length -1);
} else if (azione == 'cancella' ) {
// Cancella tutto l'input
espressione = '';
} else {
// aggiungi all'espressione il carattere corrispondente al tasto premuto
if (espressione == '0') {
espressione = '';
}
espressione = espressione + azione;
}
// se espressione รจ vuoto lo faccio diventare 0
if (espressione == '') {
espressione = '0';
}
// Copi espressione modificata dal tasto premuto nel'elemento
campoImmisione.innerHTML = espressione;
};
// Assegno funzione all'evento click di tutti i bottoni
var calcolatrice = document.getElementById('calcolatrice');
var bottoni = calcolatrice.querySelectorAll('.tasto');
for(var i = 0; i < bottoni.length; i++) {
bottoni[i].addEventListener('click', tastoPremuto);
}
</script>
</body>
</html>
/css/stile.css
html {
font-size: 16px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1rem;
margin:0;
padding:0;
}
* {
box-sizing: border-box;
}
/*===========================
Contenitore
===========================*/
.calcolatrice {
background-color: #666666;
height: 100vh;
color: white;
padding: 15px;
display: flex;
flex-flow: column nowrap;
max-width: 768px;
margin: 0 auto;
}
/*===========================
Testata
===========================*/
.testata {
width: 100%;
flex: 0 0 3rem;
display: flex;
align-items: center;
justify-content: space-between;
max-height: 3rem;
padding: 2px;
}
.testata img {
max-height: 100%;
}
/*===========================
Carta
===========================*/
.carta {
background-color: #eeeeee;
color: #222222;
flex: 1 1 1%;
display: flex;
}
.carta .immissione {
margin-top: auto;
font-size: 3rem;
padding: 4px;
width: 100%;
text-align: right;
}
/*===========================
tastiera
===========================*/
.tastiera {
flex: 1 1 70%;
max-height: 70%;
display:flex;
flex-flow: column nowrap;
}
.tastiera .riga {
flex: 0 0 20%;
max-height: 20%;
padding-top: 1px;
padding-bottom: 1px;
display: flex;
flex-flow: row nowrap;
}
/*===========================
colonne
===========================*/
.colonna-1, .colonna-2, .colonna-3, .colonna {
padding-left: 1px;
padding-right: 1px;
}
.colonna-1 {
flex: 0 0 25%;
max-width: 25%;
}
.colonna-2 {
flex: 0 0 50%;
max-width: 50%;
}
.colonna-3 {
flex: 0 0 75%;
max-width: 75%;
}
.colonna {
flex: 1 1 1%;
max-width: 100%;
}
/*===========================
Pulsanti
===========================*/
.tasto {
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
font-size: 1.4rem;
}
.tasto:active {
transform: translate(1px,1px);
}
.tasto:focus {
outline: none;
}