Calculadora Básica

INICIO

Este ejercicio está diseñado para introducir los elementos básicos de JavaScript, tales como la manipulación del DOM, el manejo de eventos y el uso de funciones. El objetivo es crear una calculadora simple que permita al usuario realizar operaciones aritméticas básicas (suma, resta, multiplicación y división) e interactuar con el formulario.

CODE

<body>
    <h1>Calculadora Básica</h1>
    <!-- Introducción y objetivos del ejercicio -->
    <p>
        Este ejercicio está diseñado para introducir los elementos básicos de JavaScript, 
        tales como la manipulación del DOM, el manejo de eventos y el uso de funciones.
        El objetivo es crear una calculadora simple que permita al usuario realizar operaciones
        aritméticas básicas (suma, resta, multiplicación y división) e interactuar con el formulario.
    </p>

    <!-- Formulario de la calculadora -->
    <div>
        <input type="number" id="num1" placeholder="Número 1">
        <input type="number" id="num2" placeholder="Número 2">

        <select id="operation">
            <option value="sum">Sumar</option>
            <option value="subtract">Restar</option>
            <option value="multiply">Multiplicar</option>
            <option value="divide">Dividir</option>
        </select>

        <button onclick="calculate()">Calcular</button>
        <button id="reset" onclick="resetCalculator()">Reiniciar</button>
    </div>

    <!-- Área para mostrar el resultado -->
    <div id="result"></div>

    <script>
        // Función para realizar el cálculo
        function calculate() {
            // Obtenemos los valores de los dos números y la operación seleccionada
            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
            const operation = document.getElementById('operation').value;
            let result;

            // Verificamos que ambos números sean válidos
            if (isNaN(num1) || isNaN(num2)) {
                document.getElementById('result').textContent = "Por favor, ingresa ambos números.";
                return;
            }

            // Realizamos la operación seleccionada
            if (operation === 'sum') {
                result = num1 + num2;
            } else if (operation === 'subtract') {
                result = num1 - num2;
            } else if (operation === 'multiply') {
                result = num1 * num2;
            } else if (operation === 'divide') {
                // Evitamos la división por cero
                if (num2 === 0) {
                    document.getElementById('result').textContent = "No se puede dividir entre cero.";
                    return;
                }
                result = num1 / num2;
            }

            // Mostramos el resultado en el área correspondiente
            document.getElementById('result').textContent = "Resultado: " + result;
        }

        // Función para reiniciar el formulario
        function resetCalculator() {
            document.getElementById('num1').value = '';
            document.getElementById('num2').value = '';
            document.getElementById('operation').value = 'sum';
            document.getElementById('result').textContent = '';
        }
    </script>

</body>