HTML: completar la descripción de teclas

Diferenciando las teclas HTML

Esta es la última vuelta al html. Lo he dejado para el final con objeto de que se vea porqué es necesaria esta modificación.

Al ver el código o incluso ya con el diagrama de flujos, es fácil darse cuenta que se deben diferenciar las teclas por su tipo: los dígitos o números, los operadores, la tecla de borrar...

Esta direcnciación se puede hacer de varias formas, he elegido la que hace uso del atributo data-tipo, que javascript lee ediante la propiedad dataset.tipo del obejto DOM.

Si has seguido todo este proceso, al pie de la letra tendrás este resultado:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Mini Calculadora</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="calcula<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Mini Calculadora</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="calculadora.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="marco">

  <div class="visor">0</div>

  <div class="tecla" data-tipo="num">1</div>

  <div class="tecla" data-tipo="num">2</div>

  <div class="tecla" data-tipo="num">3</div>

  <div class="tecla" data-tipo="num">4</div>

  <div class="tecla" data-tipo="num">5</div>

  <div class="tecla" data-tipo="num">6</div>

  <div class="tecla" data-tipo="num">7</div>

  <div class="tecla" data-tipo="num">8</div>

  <div class="tecla" data-tipo="num">9</div>

  <div class="tecla" data-tipo="num">0</div>

  <div class="tecla" data-tipo="num">.</div>

  <div class="tecla signo" data-tipo="signo">+/-</div>

  <div class="tecla oper_S" data-tipo="oper">+</div>

  <div class="tecla oper_R" data-tipo="oper">-</div>

  <div class="tecla oper_P" data-tipo="oper">*</div>

  <div class="tecla oper_D" data-tipo="oper">/</div>

  <div class="tecla enter" data-tipo="oper">Enter</div>

  <div class="tecla borrar" data-tipo="borrar">C</div>

</div>

<script type="text/javascript" src="calculadora.js"></script>

</body>

</html>

Comentarios

Con práctica y tiempo es posible dejar escrito el código HTML prácticamente completo desde el principio.

Pero hay que estar abierto a cambios completar el código o al ver la página en funcionamiento.

No se puede prever absolutamente todo desde el inicio de un proyecto complejo.

Por último no hemos hecho nada concreto en cuanto a la recursividad porque el tamaño e nuestra calculadora hace que funicona igual en pantallas grandes que pequeñas.