Una calculadora con CSS y HTML | Antonio García Prats

Mi propósito, en esta entrada de mi blog, es mostraros como con instrucciones sencillas de HTML, CSS y apenas algunas líneas de código en Javascript es posible crear aplicaciones bastante aparentes y útiles en nuestro navegador. Vamos a crear una calculadora con CSS y HTML.

En esta ocasión, os guiaré a través del código que os muestro a continuación como crear una calculadora básica. Evidentemente, es fácil hacerla más compleja si fuera necesario pero, eso lo dejaré para más adelante. Lo primero es definir la estructura de la calculadora con etiquetas HTML tal y como os muestro a continuación:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="calculadora">
        <input type="text" id="resultado" disabled>

        <button class="red" onclick="clearresult()">AC</button>
        <button class="red" onclick="clearresult()">C</button>

        <button class="orange" onclick="getresult('%')">%</button>
        <button class="orange" onclick="getresult('/')">/</button>

        <button onclick="getresult('7')">7</button>
        <button onclick="getresult('8')">8</button>
        <button onclick="getresult('9')">9</button>
        <button class="orange" onclick="getresult('*')">*</button>

        <button onclick="getresult('4')">4</button>
        <button onclick="getresult('5')">5</button>
        <button onclick="getresult('6')">6</button>
        <button class="orange" onclick="getresult('-')">-</button>

        <button onclick="getresult('1')">1</button>
        <button onclick="getresult('2')">2</button>
        <button onclick="getresult('2')">3</button>
        <button class="orange" onclick="getresult('+')">+</button>

        <button onclick="getresult('00')">00</button>
        <button onclick="getresult('0')">0</button>
        <button onclick="getresult('.')">.</button>
        <button class="orange" onclick="getresult('=')">=</button>

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

    </div>

</body>
</html>

No aparenta ninguna dificultad este código, asi que, continuaremos avanzando con el pequeño proyecto. Ahora toca el turno a Javascript. Aquí vamos a hacer uso de DOM para vincular nuestro div y a través de él crear dos funciones que responderán a los dos eventos onClick que hemos creado: bien mostrar un resultado, bien evaluar una operación aritmética. Veámos:

let resultado = document.getElementById("resultado");

function getresult (value) {
    if (value === "=") {
        resultado.value = eval(resultado.value);
    } else {
        resultado.value += value;
    }
}

function clearresult () {
    resultado.value = "";
}

Para terminar, solo nos queda aplicar una serie de estilos a la calculadora y a cada una de sus teclas -agrupadas por tipos- para finalizar nuestro proyecto. Veámos el código que requeriremos:

.calculadora {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    background-color: #fffefe;
    padding: 40px 0;
    border-radius: 10px;
}

input[type="text"] {
    width: 80%;
    height: 80px;
    font-size: 40px;
    border-radius: 10px;
    text-align: right;
    margin-bottom: 10px;
    padding: 0 10px;
}

button {
    width: 50px;
    height: 50px;
    font-size: 24px;
    margin: 5px;
    border-radius: 5px;
    border: none;
    background-color: #bdbdbd;
    cursor: pointer;
}

button:hover {
    background-color: #ddd;
}

button:active {
    transform: scale(0.95);
}

.red {
    background-color: #ff4a4a;
}

.red:hover {
    background-color: rgb(231, 83, 83);
}

.orange {
    background-color: orange;
}

.orange:hover {
    background-color: rgb(226, 179, 90);
}

Ahora solo queda preguntarse por el resultado. La respuesta la tenéis a continuación con este pequeño vídeo:

Canal de youtube: https://www.youtube.com/@antgarciaprats

Deja una respuesta Cancelar la respuesta