Calculadora HTML CSS JS

PASO 1
Para crear nuestra calculadora en Javascript lo primero que debemos hacer es la estructura básica en HTML y CSS.
Para eso creamos un Div llamado «calculadora» dentro del cual tendremos un Input para mostrar los números y un conjunto de botones y operadores.

				
					<!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="estilo.css">
</head>
<body>
    <div class="calculadora">
        <input type="text" class="display" disabled>
        <div class="keys">
           <div class="keys">
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('+')">+</button>
    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('-')">-</button>
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="appendToDisplay('0')">0</button>
    <button onclick="appendToDisplay('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendToDisplay('/')">/</button>
</div>

PASO 2 Agregamos algunos estilos con CSS para darle apariencia a nuestra calculadora.

				
					.calculadora {
   width: 200px;
    margin: 50px auto;
    padding:30px;
    background-color:hotpink;
 
}

.display {
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
    text-align: right;
     font-family: Raleway;
    color:hotpink;
    font-weight: bold;
    font-size: 20px;
}

.keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
     
}

button {
    padding: 10px;
    font-family: Raleway;
    color:whitesmoke;
    font-weight: bolder;
    font-size: 20px;
    background-color:deeppink;
    border:1px;
    border-radius: 10px;
}

Antes de seguir te explico sobre la clase "keys" que yo al principio no la entendía bien.

HTML: En el HTML, dentro del div con la clase calculadora, creamos otro div con la clase keys. Este div contendrá todos los botones de la calculadora.

				
					<div class="calculadora">
    <input type="text" class="display" disabled>
    <div class="keys">
        <!-- Botones de la calculadora -->
    </div>
</div>

CSS: En el CSS, aplicamos estilos al contenedor de los botones utilizando la clase .keys. En el ejemplo proporcionado, utilizamos CSS Grid para organizar los botones en una cuadrícula con cuatro columnas y filas automáticas.

				
					.keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

display: grid;: Esto especifica que el contenedor .keys se mostrará como una cuadrícula.
grid-template-columns: repeat(4, 1fr);: Esto define cuatro columnas de igual tamaño dentro de la cuadrícula. Cada columna se ajustará automáticamente para ocupar el espacio disponible.
gap: 5px;: Esto establece un espacio de 5 píxeles entre los elementos de la cuadrícula (en este caso, entre los botones).

JavaScript: La clase .keys en el HTML y el CSS no requiere ninguna manipulación en el JavaScript. Esta clase es simplemente una forma de organizar visualmente los botones en la interfaz de la calculadora.

PASO 3
Ahora, necesitamos agregar la funcionalidad con JavaScript para que nuestra calculadora pueda realizar operaciones.

				
					let displayValue = '';

function appendToDisplay(value) {
    displayValue += value;
    document.querySelector('.display').value = displayValue;
}

function clearDisplay() {
    displayValue = '';
    document.querySelector('.display').value = displayValue;
}

function calculate() {
    try {
        displayValue = eval(displayValue);
        document.querySelector('.display').value = displayValue;
    } catch (error) {
        displayValue = 'Error';
        document.querySelector('.display').value = displayValue;
    }
}

PASO 4
Finalmente, necesitamos asociar funciones a los eventos de los botones para que nuestra calculadora funcione correctamente.

				
					<div class="keys">
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('+')">+</button>
    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('-')">-</button>
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="appendToDisplay('0')">0</button>
    <button onclick="appendToDisplay('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendToDisplay('/')">/</button>
</div>