Ejemplo de template


<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="(cc) 3con14" />
  <link rel="stylesheet" href="/css/estilos00.css">
  <title>Ejemplo 00</title>
</head>

<body>
  <div class="contenedor">

    <div class="ejercicio">
      Escribir un programa que calcule la superficie de un triángulo en función de su base y de su altura.
    </div>

    <div class="datos">
      <label for="dato1">base =
        <input type="number" id="dato1" onfocus="this.select()">
      </label>
      
      <label for="dato2">altura =
        <input type="number" id="dato2" onfocus="this.select()">
      </label>
    </div>

    <div id="acciones" class="acciones">
      <button id="calcular">Calcular</button>
      <button id="borrar">Borrar</button>
    </div>

    <div id="respuesta" class="respuesta"></div>

  </div>

  <script src="/js/codigo00.js"></script>
</body>

</html>

JS


/* (cc) 3con14
 * HTML...: ejemplo_00.html
 * CSS....: css/estilos00.css
 * JS.....: js/codigo00.js
 */
/* jshint esversion: 6 */
window.addEventListener('DOMContentLoaded', function () {
    let rpta = document.getElementById('respuesta');
    let base = document.getElementById('dato1');
    let altura = document.getElementById('dato2');

    let calcula = document.getElementById('calcular');
    let borra = document.getElementById('borrar');

    calcula.addEventListener('click', calculaArea);
    borra.addEventListener('click', borraDatos);

    function calculaArea() {
        let area, b, h;
        let resultado = '';

        b = parseFloat(base.value);
        h = parseFloat(altura.value);

        if (isNaN(b) || isNaN(h)) {
            resultado = '¡¡ ERROR !!';
            rpta.style.color = 'red';
        } else {
            area = (b * h) / 2;
            resultado = 'Superficie = ' + area + ' u<sup>2</sup>';
            rpta.style.color = 'inherit';
        }
        rpta.innerHTML = resultado;
    }

    function borraDatos() {
        rpta.style.color = 'inherit';
        rpta.innerHTML = '';
        base.value = '';
        altura.value = '';
    }
});

CSS


/* (cc) 3con14
 * HTML...: ejemplo_01.html
 * CSS....: css/estilos00.css
 * JS.....: js/codigo00.js
 * ---------------------------- 
 */

/* Reglas generales
---------------------------------------- */
html { 
    box-sizing       : border-box;
    font             : 16px sans-serif;
    color            : #333;
    background-color : hsla(60, 50%, 75%, 0.25);
}
*, *::after, *::before {
    box-sizing : inherit;
    margin     : 0;
    padding    : 0;
}
*:focus {
    outline    : 0 none transparent;
    background : rgba(255,0,0,0.1);
}
body {
    min-height     : 80vh;
    max-width      : 100vw;
}

/* contenedores
---------------------------------------- */
.contenedor {
    max-width : 800px;
    width     : 90%;
    margin    : 10vh auto;
}
.ejercicio, .respuesta {
    margin   : 3em 1em 1em 1em;
    position : relative;
}
.acciones  { text-align: center; }

input, .datos, .respuesta {
    font  : 1.2em monospace;
    color : #333;
}
.ejercicio::before, .datos::before, .respuesta::before {
    position      : absolute;
    top           : -2em;
    left          : 0;
    right         : 0;
    font          : 900 1.2em sans-serif;
    margin        : 0 -1em 0.5em -1em;
    color         : #333;
    border-bottom : 1px solid rgba(0, 0, 0, 0.251);
}
.ejercicio::before { content: "Ejercicio:"; }
.respuesta::before { 
    content: "Respuesta";
    background-color: rgba(0,128,255,0.1);
    text-align: center;
}
.ejercicio {
    font   : italic 1.2em/1.3 georgia, serif;
    color  : hsla(120, 50%, 25%, 1);
}
.datos::before {
    content: "Datos";
    background-color: rgba(0,0,0,0.1);
}
.datos {
    margin               : 4em 1em 1em 1em;
    position             : relative;
    text-align           : center;
    display              : grid;
    grid-template-columns: 1fr 1fr;
}

/* Botones y cajas de texto
---------------------------------------- */
input { 
  text-align    : right;
  margin        : 0.5em 0.5em 0 0;
  border-radius : 4px;
  box-shadow    : 0 0 1px 0 #666;
}
label, input { 
  padding : 0.2rem;
  border  : 0 none transparent;
}
button {
    padding       : 0.5em 1em;
    margin        : 1em 0.5em;
    border-radius : 4px;
    font          : 900 0.8em sans-serif;
}
button:hover {
    cursor     : pointer;
    background : hsla(0, 0%, 20%, 0.25);
}
[type^="number"] {
    width: 4em;
}