/calcolatrice/index.html
<!DOCTYPE html>
<!--
====================================================================
LAYOUT DELL CALCOLATRICE
====================================================================
Calcolatrice utilizza un layout di tipo flex annidato.
1. div.calcolatrice:
Layout flex di tipo column dall'alto verso il basso. La
disposizione del contenuto è determinata dalla proprietà
justify-content: space-between. Contiene tre elementi:
div.top-bar, div.carta e div.tastiera
2. div.top-bar
Layout flex di tipo row orizzontale. La disposizione
del contenuto è determinata dalla proprietà
justify-content: space-between. Sono presenti due elementi:
img e span.top-bar-title.
3. div.carta
Layout flex di tipo column dall'alto verso il basso.
Contiene un solo elemento: div.immissione
4. div.tastiera
Layout flex di tipo column dall'alto verso il basso. Contiene
5 elementi div.riga ognino dei quali occupa il 20% dello spazio
(flex: 0 0 20%).
5. div.riga
Layout flex di tipo row orizzontale. Ogni riga contiene elementi
div.colonna-1, div.colonna-2 o div.colonna-3 rispettivamente
larghi 25%, 50% e 75% dello spazio a disposizione.
6. div.colonna-1, div.colonna-2, div.colonna-3
Elementi uguali son non per la larghezza (flex: 0 0 25%,
flex: 0 0 50%, flex: 0 0 75%) sono i contenitori dei tasti
(button.tasto). Il margine superiore e inferiore è dato
dal padding (margine interno) dell'elemento row che li contiene
7. button.tasto
button.tasto è alto e largo quanto l'elemento div.colonna che
lo contiene. Il margine tra un bottone e l'altro è dato dal
padding (margine interno) della div.colonna- che contiene il bottone.
Quando necessario al button.tasto viene aggiunta l'attributo
data-val che contiene il valore da utilizzare nell'espressione
da valutare con javascript al posto del valore del button stesso.
Ad esempio il taso "," ha data-val="." che è il separatore dei
decimali utilizzato in javascript.
-->
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/stile.css">
<title>Calcolatrice</title>
</head>
<body>
<div class="calcolatrice">
<!-- Testata -->
<div class="top-bar">
<img src="img/Logo-Accademia.png" alt="Accademia di Belle Arti Urbino">
<span class="top-bar-title">Calcolatrice</span>
</div>
<!-- CARTA -->
<div class="carta">
<div class="immissione" id ="immissione">0</div>
</div>
<!-- Tastiera calcolatrice-->
<div class="tastiera" id="tastiera">
<!-- RIGA -->
<div class="riga">
<!-- COLONNE -->
<div class="colonna-1">
<button type="button" class="tasto" data-value="cancella">
C
</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="(">
(
</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value=")">
)
</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value=" + ">
+
</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-value="1">1</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="2">2</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="3">3</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value=" - ">−</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-value="4">4</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="5">5</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="6">6</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value=" * ">×</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-value="7">7</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="8">8</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="9">9</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value=" / ">÷</button>
</div>
</div>
<div class="riga">
<div class="colonna-1">
<button type="button" class="tasto" data-value="backspace">⌫</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="0">0</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value=".">,</button>
</div>
<div class="colonna-1">
<button type="button" class="tasto" data-value="calcola">=</button>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
/calcolatrice/css/
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: 300;
margin:0;
}
* {
box-sizing: border-box;
}
/*==================================================
Contenitore della calcolatrice
==================================================*/
.calcolatrice {
height: 100vh;
background-color: #666;
color: white;
/* margine attorno alla calcolatrice */
padding: 15px;
display: flex;
flex-flow: column nowrap;
}
/*==================================================
Testata con logo e titolo
==================================================*/
.top-bar {
width: 100%;
/* Impostazioni come CONTENUTO flex: non cresce,
non cala, ha un'altezza di 2.7em */
flex: 0 0 3em;
display: flex;
flex-flow: row nowrap;
/* Impostazioni come CONTENITORE flex: flusso
orizzontale, contenuto disposto come
justify-content: space-between */
justify-content: space-between;
align-items: center;
}
/*==================================================
Logo barra superiore
==================================================*/
.top-bar > img {
height: 2.5em;
width: auto;
flex: 0 0 1%;
}
/*==================================================
Titolo barra superiore
==================================================*/
.top-bar-title {
font-size: 1.1em;
font-weight: 700;
}
/* ===================
Carta
===================*/
.carta {
background-color: #eee;
color: #222;
flex: 1 1 1%;
display: flex;
}
.carta .immissione {
font-size: 3em;
text-align: right;
padding: 4px;
margin-top: auto;
width: 100%;
}
/* ===================
Tastiera
===================*/
.tastiera {
max-height: 70%;
/* Impostazioni come CONTENUTO flex: non cresce,
può calare, ha un'altezza di base del 70% */
flex: 1 1 70%;
display: flex;
/* Impostazioni come CONTENITORE flex con flusso
verticale */
flex-flow: column nowrap;
padding-top: 1px;
}
/*==================================================
RIGA DI TASTI NELLA TASTIERA
==================================================*/
.tastiera .riga {
/* Impostazioni come CONTENUTO flex: non cresce,
non cala, ha un'altezza del 20% */
flex: 0 0 20%;
max-height: 20%;
padding-top: 1px;
padding-bottom: 1px;
/* Impostazioni come CONTENITORE flex con flusso
orizzontale */
display: flex;
flex-flow: row nowrap;
/* I due margini esterni negativi servono a compensare
il padding degli elementi .colonna- contenuti
garantendo un corretto allineamento esterno dei
tasti*/
margin-left: -1px;
margin-right: -1px;
}
/*======================================================
COLONNE
Tre elementi identici in cui cambia solo la larghezza
=====================================================*/
.colonna-1,.colonna-2, .colonna-3 {
/* Margine interno che garantisce la distanza tra
i tasti */
padding-left: 1px;
padding-right: 1px;
}
.colonna-1 {
/* Impostazioni come CONTENUTO flex: non cresce,
non cala, ha una larghezza del 25% */
flex: 0 0 25%;
max-width: 25%;
}
.colonna-2 {
/* Impostazioni come CONTENUTO flex: non cresce,
non cala, ha una larghezza del 50% */
flex: 0 0 50%;
max-width: 50%;
}
.colonna-3 {
/* Impostazioni come CONTENUTO flex: non cresce,
non cala, ha una larghezza del 75% */
flex: 0 0 75%;
max-width: 75%;
}
/* ===================
Pulsanti
===================*/
.tasto {
/* Il tasto occupa l'intero spazio definito
dall'elemento .colonna- che lo contiene*/
width: 100%;
height: 100%;
border: 0;
/* border-radius: 10px; */
font-size: 1.4em;
}
.tasto:active {
transform: translate(1px,1px);
}