Nella versione più "pompata" ho curato meglio l'aspetto sia grafico che funzionale. Per i tag tasti ho applicato diverse classi utili sia per la formattazione col CSS sia per attribuire via script le varie funzioni, questa volta senza passare per l'attributo onclick (così è invece nella versione semplice). Tutte le "azioni" sono quindi definite nel resto dello script in <head>.
Il display è più grande. Nella versione semplice ho usato un input con singola riga mentre qui ha usato una textarea con un'altezza impostata da CSS che attualmente mostra 3 righe, ma ovviamente può essere personalizzata facilmente attraverso il CSS, come tutto il resto.
In questa versione alcuni operatori e funzioni non vengono inseriti e mostrati con una sintassi JavaScript; ad esempio il "*" per la moltiplicazione viene mostrato come "×", così il "/" per la divisione viene mostrato come "÷", e ancora le funzioni "sin", "cos", ecc. sono inserite e mostrate esattamente con quelle relative diciture anziché "Math.sin", "Math.cos", ecc.
Questo per migliorare l'aspetto nella rappresentazione sul display, nonché ottimizzare gli spazi.
Nella funzione risolviEspressioneDisplay() viene poi richiamata la funzione sostituisciValoriSpeciali() che si occupa appunto di "convertire" l'espressione, rimpiazzando quei valori speciali con i relativi valori JavaScript, in modo da renderla appetibile dal famoso eval().
Ovviamente anche in questo caso il tutto può essere "facilmente" implementato/migliorato.
Qui lo snippet:
codice:
<!doctype html>
<html lang="it">
<head>
<title>Calcolatrice</title>
<style>
/*-- Qui il CSS per la formattazione di tutto il layout --*/
* {
box-sizing: border-box;
}
body {
background: #e4dddb;
}
#calcolatrice {
width: 350px;
padding: 7px;
border-radius: 6px;
background: #445066;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
#display {
width: 100%;
height: 3.5em;
resize: none;
margin: 5px 0 10px;
padding: 4px 4px 2px;
font: 24px/1 "Lucida Console", Monaco, monospace;
text-align: right;
border: 1px solid #112e13;
border-radius: 4px;
color: #010d00;
background: #a5cb8d;
overflow-y: auto;
}
#display::-moz-selection {
color: #062;
background: #9bff9b;
}
#display::selection {
color: #062;
background: #9bff9b;
}
#pulsantiera {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
padding: 10px;
border-radius: 3px;
background: #e0e1e9;
}
#pulsantiera input {
width: calc(90% / 4);
margin: 3px 0;
padding: 5px;
font: bold 20px/1.2 "Arial Black", Gadget, sans-serif;
text-align: center;
border: 1px solid #555;
border-radius: 4px;
cursor: pointer;
box-shadow: inset 0 0 20px rgba(0,0,0,0);
transition: .3s;
}
#pulsantiera input:hover {
border-color: #fff;
box-shadow: inset 0 -40px 5px rgba(0,0,0,.15);
transition: .1s;
}
/* - Colori tasti - */
#pulsantiera input { background: #7da5d6; color: #fff; }
#pulsantiera .resetta { background: #db3b3b; }
#pulsantiera .rimuovi { background: #c7c8c2; color: #cc2e38; }
#pulsantiera .operatore ,
#pulsantiera .separatore ,
#pulsantiera .parentesi { background: #c7c8c2; }
#pulsantiera .risolvi { background: #21b476; }
#pulsantiera .funzione { background: #cc6c4b; }
</style>
<script>
/*-- Qui il JavaScript per tutte le azioni dell'applicazione --*/
var display;
window.onload = inizializza;
function inizializza(){
display = calcolatrice.display; //Fix IE11
calcolatrice.onsubmit = function(e){e.preventDefault();}
display.focus();
display.onkeydown = function(e){
if(e.keyCode == 13){ // Se premo invio nel display, vado a risolvere
risolviEspressioneDisplay();
e.preventDefault();
}
}
var tasti = document.querySelectorAll('#pulsantiera>input');
var i = tasti.length;
while(i--){
tasto = tasti[i]
classe = tasto.classList;
if (classe.contains('funzione')) tasto.onclick = function(){inserisciFunzione(this.value);};
else if (classe.contains('risolvi')) tasto.onclick = risolviEspressioneDisplay;
else if (classe.contains('rimuovi')) tasto.onclick = rimuoviUltimoCarattere;
else tasto.onclick = function(){aggiungiAlDisplay(this.value);};
};
}
function aggiungiAlDisplay(valore){
visualizza(display.value + valore);
}
function rimuoviUltimoCarattere(){
visualizza(display.value.slice(0, -1));
}
function inserisciFunzione(nomeFunzione){
visualizza(' '+nomeFunzione+'('+display.value+')');
}
function risolviEspressioneDisplay(){
var espressione = sostituisciValoriSpeciali(display.value);
visualizza(eval(espressione));
}
function sostituisciValoriSpeciali(espressione) {
var coppieValori = [
['sin', 'Math.sin' ]
,['cos', 'Math.cos' ]
,['tan', 'Math.tan' ]
,['atn', 'Math.atan' ]
,['×' , '*' ]
,['÷' , '/' ]
]
for (var i = 0; i < coppieValori.length; i++)
espressione = espressione.replace(new RegExp(coppieValori[i][0],"g"), coppieValori[i][1]);
return espressione;
};
function visualizza(valore){
display.value = valore;
spostaCursoreAllaFine(display);
}
function spostaCursoreAllaFine(el){ // Posiziono il cursore e lo scroll alla fine della textaea
el.focus();
el.scrollTop = el.scrollHeight
}
</script>
</head>
<body>
<!-- Qui il codice HTML per la struttura dell'applicazione -->
<form name="calcolatrice" id="calcolatrice">
<textarea name="display" id="display"></textarea>
<div id="pulsantiera">
<input type="button" value="sin" class="funzione sin">
<input type="button" value="cos" class="funzione cos">
<input type="button" value="tan" class="funzione tan">
<input type="button" value="atn" class="funzione atn">
<input type="button" value="(" class="parentesi">
<input type="button" value=")" class="parentesi">
<input type="button" value="←" class="rimuovi" >
<input type="reset" value="C" class="resetta">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="+" class="operatore addizione">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-" class="operatore sottrazione">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="×" class="operatore moltiplicazione">
<input type="button" value="0">
<input type="button" value="." class="separatore">
<input type="submit" value="=" class="risolvi">
<input type="button" value="÷" class="operatore divisione">
</div>
</form>
</body>
</html>
Buono sviluppo.