/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=" - ">&minus;</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=" * ">&times;</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=" / ">&divide;</button>
                </div>
            </div>
            <div class="riga">
                <div class="colonna-1">
                    <button type="button" class="tasto" data-value="backspace">&#9003;</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);
}