Creare una calcolatrice con Javascript, HTML e CSS

Realizziamo una calcolatrice semplice in grado di eseguire le 4 operazioni artitmetiche, ed il calcolo percentuale

Sarò sincero, di post come questo ce ne sono tantissimi, ma non tutti mi hanno pienamente convinto, non tanto perché fatti male, ma perché la demo che vi mostrano non virtualizza una calcolatrice completa.

Io ho preso, tra tutti quelli che ho trovato online, il codice che mi ha convinto di più, e mi sono permesso di perfezionarlo, parlo del codice di BytePost per la creazione di una calcolatrice in Javascript.

Di questo codice ci sono due cose che non mi soddisfano a pieno:

• La mancanza di un calcolatore percentuale
• Il fatto di mostrare tutta la formula

In quest’articolo andremo a modificare un codice già esistente adattandolo alle nostre esigenze.

Il form HTML

Il codice HTML è tutto sommato uguale, le modifiche apportate riguardano l’aggiunta di 3 nuovi campi hidden, che mi permetteranno di memorizzare

• la precedente digitazione
• l’operatore selezionato
• se quello visualizzato è il risultato di un precedente calcolo

Inoltre mi sono permesso di modificare i nomi delle funzioni, per gusto personale, distinguendo le digitazioni numeriche, che comprende l’inserimento della virgola, con la selezione dell’operatore aritmetico, più l’aggiunta del calcolo del valore percentuale. Oltre alla sostituzione di caratteri, secondo me più consoni.

<div id="calcolatrice">
  <form name="form">
    <input class="area" name="monitor" value="" placeholder="0">
    <input name="last" type="hidden" value="">
    <input name="oper" type="hidden" value="">
    <input name="res" type="hidden" value="">
    <table id="calc">
      <tr>
    <td><input type="button" value="C"  onclick="del();"></td>
    <td><input type="button" value="◄" onclick="cancella();"></td>
    <td><input type="button" value="%" onclick="perc();"></td>
    <td><input type="button" value="&divide;"  onclick="ar('/');"></td>
      </tr>   
      <tr>
    <td><input type="button" value="7" onclick="digit(7);"></td>
    <td><input type="button" value="8" onclick="digit(8);"></td>
    <td><input type="button" value="9" onclick="digit(9);"></td>
    <td><input type="button" value="x" onclick="ar('*');"></td>
      </tr>  
      <tr>
    <td><input type="button" value="4" onclick="digit(4);"></td>
    <td><input type="button" value="5" onclick="digit(5);"></td>
    <td><input type="button" value="6" onclick="digit(6);"></td>
    <td><input type="button" value="-" onclick="ar('-');"></td>
      </tr>  
      <tr>
    <td><input type="button" value="1" onclick="digit(1);"></td>
    <td><input type="button" value="2" onclick="digit(2);"></td>
    <td><input type="button" value="3" onclick="digit(3);"></td>
    <td><input type="button" value="+" onclick="ar('+');"></td>
      </tr>  
      <tr>
    <td><input type="button" value="0" onclick="digit(0);" ></td>
    <td><input type="button" value="00" onclick="digit('00');"></td>
    <td><input type="button" value=","onclick="digit('.');"></td>
    <td><input type="button" value="=" onclick="result();"></td>
      </tr>  
    </table>
  </form>
 </div>

Modifiche CSS

Non ho apportato nessuna particolare modifica, solo l’allineamento (di qualche pixel) del monitor che visualizza i numeri

* {
  margin:0;
  padding:0px;
}
#calc input {
  width:40px;
  height:40px;
  margin:1px;
  font-size:15px;
}
.area {
  margin-left: 4px;
  width:170px;
  height:30px;
  padding:2px;
  text-align:right;
  font-size:20px
}

Il codice Javascript

Qui ci sono state le modifiche più impattanti. Abbiamo inserito il comportamento di 6 diverse funzioni

• digit – Inserimento numeri previa battitura
• ar – Selezione dell’operatore aritmetico
• cancella – Cancellazione dell’ultimo numero battuto
• del – Reset della calcolatrice
• result – Visualizzazione del risultato
• perc – Calcolo del valore percentuale rispetto la vecchia selezione

function digit(n){
  if (document.form.res.value=='Y') {
    del();
  }
  document.form.monitor.value = document.form.monitor.value+n;
}

function ar(n){
  document.form.oper.value = n;
  document.form.last.value = document.form.monitor.value;
  document.form.monitor.value = '';
  document.form.res.value='';
}

function cancella() {
  var temp = document.form.monitor.value;
  document.form.monitor.value = temp.substring(0, temp.length-1);
}

function del() {
  document.form.monitor.value = '';
  document.form.last.value = '';
  document.form.oper.value = '';
  document.form.res.value = '';
}

function result() {
  if (document.form.res.value!='Y') {
  if (document.form.monitor.value && document.form.oper.value && document.form.last.value) {
    document.form.monitor.value = eval(document.form.last.value+document.form.oper.value+document.form.monitor.value);
    document.form.res.value='Y';
  }
  }
}

function perc() {
 if (document.form.res.value!='Y') {
  if (document.form.monitor.value && document.form.oper.value && document.form.last.value) {
    document.form.monitor.value = (document.form.last.value/100)*document.form.monitor.value;
    if (document.form.oper.value=='*' || document.form.oper.value=='/') {
      document.form.res.value='Y';
    }
  }
  }
}

Il codice javascript esegue i seguenti controlli

1. La digitazione numerica è libera
2. Alla pressione del tasto operatore viene memorizzata l’operazione, la digitazione viene memorizzata, e il monitor viene pulito per la nuova digitazione
3. La battitura del tasto Result (=) permette la visualizzazione del risultato, più la memorizzazione del flag res. Se successivamente viene battuta un’ulteriore operazione, si ritorna al punto 2., altrimenti alla battitura di un tasto numerico viene eseguito un reset della calcolatrice per un nuovo calcolo pulito
4. È stato aggiunto il calcolo del valore percentuale
   1. Il calcolo “numero ÷ numero %” viene considerato un risultato, quindi si ritorna al punto 2.
   2. Il calcolo “numero x numero %” viene considerato un risultato, quindi si ritorna al punto 2.
   3. Il calcolo “numero – numero %” non viene considerato un risultato, c’è quindi la possibilità di usare il tasto = per completare il calcolo e tornare quindi al punto 2.
   4. Il calcolo “numero + numero %” non viene considerato un risultato, c’è quindi la possibilità di usare il tasto = per completare il calcolo e tornare quindi al punto 2.

Di seguito la demo del codice di cui sopra