El HTML: contenido con clases
Asginar clases a elementos del HTML
En esta segunda fase vamos a ir colocando los nombres de clases a cada elemento
Ve anotando o recuerda las clases que usas y para qué las usas. En el siguiente paso vas a definir esas clases y debes saber par que son.
Estas clases también nos van a servir en el código javascript para identificar bloques div.
Estos bloques están dentro de uno mayor que será la calculadora completa.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mini Calculadora</title>
<link href="calculadora.css rel="stylesheet" type="text/css">
</head>
<body>
<div class="marco">
<div class="visor">0</div>
<div class="tecla">1</div>
<div class="tecla">2</div>
<div class="tecla">3</div>
<div class="tecla">4</div>
<div class="tecla">5</div>
<div class="tecla">6</div>
<div class="tecla">7</div>
<div class="tecla">8</div>
<div class="tecla">9</div>
<div class="tecla">0</div>
<div class="tecla">.</div>
<div class="tecla oper_S">+</div>
<div class="tecla oper_R">-</div>
<div class="tecla oper_P">*</div>
<div class="tecla oper_D">/</div>
<div class="tecla signo">+/-</div>
<div class="tecla enter">Enter</div>
<div class="tecla borrar">C</div>
</div>
</body>
</html>
Comentarios
Hemos colocado un marco que es el que contiene a la calculadora. en si es la propia calculadora.
Cada tecla va a tener sus clases. Las clases las vamos a definir no solo por el apecto sino también pensado en el script.
Las teclas del bloque numérico son todas iguales por eso tienen la misma clase.
La tecla de cambio de signo es algo distinta por su comportamiento, por eso le damos una clase distin
La teclas enter y borrar también tienen comportamientos diferentes.