Calculadora (Modelo C)

 Contenido

Este modelo se ha creado dentro de una tabla para controlar mejor el espacio de las teclas y tener un mejor orden, el Elemento <table>  principal se le han incluido tres <tr> filas, en  la primera y la última hemos utilizado el atributo colspan=2 para que ocupen la pantalla principal y la tecla de enter, para que arroje el resultado. para evitar la apariencia desordenada de las teclas de suma, resta, multiplicación y división se han colocado en una sola columna 





0








El Código
------------------------------------


<table border="1" cellpadding="10" cellspacing="10" style="margin: 0px auto;">
<tbody>
<tr>
<td colspan="4" id="pantalla" style="background-color: navy; color: white; font-size: 20px; height: 40px; width: 100%;">0</td>
</tr>

<tr>
<td colspan="2"><button onclick="document.getElementById('pantalla').innerHTML = '';" style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">C</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '7'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">7</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '8'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">8</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '9'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">9</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '+'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">+</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '4'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">4</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '5'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">5</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '6'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">6</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '-'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">-</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '1'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">1</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '2'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">2</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '3'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">3</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '*'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">*</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '0'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">0</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '.'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">.</button></td>
<td><button onclick="Alfonso()" style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">=</button></td>
<td><button style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">/</button></td>
</tr>
</tbody>
</table><br />

<script>
function Alfonso() {
var resultado = pantalla.textContent;
var revision= resultado;

if (revision === "") { document.getElementById('pantalla').innerHTML = "0";
} else {document.getElementById("pantalla").innerHTML = eval(resultado);}

}
</script>
<div><br /></div>

hasta aquí el código
-----------------------------------



Estilo de Presentación de la calculadora en la tabla

Los estilos son una parte muy importante del  código:

<table border="1" cellpadding="10" cellspacing="10" style="margin: 0 auto;">
en este caso mostramos los bordes de las celdas, luego un espacio alrededor de la celda y el texto de 10 unidades, y centramos toda la tabla con respecto a la página web

<td colspan="2">
en este caso estamos extendiendo las columnas en dos unidades, fusionamos  la col-1 mas  col-2

<td width: 100%; height: 100%; text-align: center; font-size: 2px;>
Aquí el caso la altura de las letras es al 100% según la página, y la alineación del texto central .



Este es el estilo de la celda:  
 style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;"

Este estilo se define asi:   style="  ... atributos ...  " 

Tiene los siguientes atributos:
Color de fondo:         background-color: #4caf50;
Color de letra:           color: white; 
Tamaño de letra:       font-size: 20px;
Altura de 40 píxeles:   height: 40px;
Con 100% extendido en la pantalla: width: 100%;

observar que cada atributo debe llevar punto y coma al final  ( ; ) 



Como Funciona la calculadora

En este modelo utilizamos un Script con una función llamada:   Alfonso()

que evalúa:   eval(resultado)
la expresión matemática contenida en:   var resultado = pantalla.textContent;
que fue extraída de la celda:     <td  id="pantalla">

la expresión matemática fue insertada en  "pantalla"  mediante el mecanismo:
onclick="document.getElementById('pantalla').innerHTML += ' ... Digito ... ';

Donde cada uno de los botones que se encuentra en cada celda está encargado de adicionar un "Digito"
 <button   ... procedimiento ...     >1</button>

el procedimiento ocurre cuando hacemos click:
onclick=" ... proceso ...  "  

activando el proceso :
document.getElementById('pantalla').innerHTML += '1'; 

adicionando  al contenido de  la celda  llamada:    "pantalla"
document.getElementById('pantalla').innerHTML

lo que se encuentre entre comillas después del signo:      +
+=  '1'        en este caso el digito:    '1'












Comentarios

Entradas populares de este blog

YamahaFzr 1000 / La Leyenda

Contruye distorsión para guitarra eléctrica