Para mi cuarto proyecto, desarrollé una aplicación Calculadora usando Vue.js. Fue una experiencia valiosa para comprender cómo manejar la entrada del usuario, mostrar resultados dinámicos y realizar cálculos con JavaScript. Aquí hay un desglose de las lecciones clave que aprendí mientras creaba esta aplicación.

1. Manejo de la entrada del usuario y actualización de la pantalla

La calculadora debe aceptar la entrada del usuario (números y operadores) y actualizar la pantalla dinámicamente. Utilicé las propiedades reactivas de Vue para realizar un seguimiento de la entrada y el resultado actuales. La función de referencia en Vue facilitó el almacenamiento y modificación de estos valores:

const result = ref('');
const calculated = ref(false);

Cada vez que un usuario hace clic en un número u operador, la propiedad del resultado se actualiza, lo que garantiza que la pantalla muestre la entrada más reciente. La función handleClick se utiliza para agregar valores al resultado:

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value  = value;
    }
}

Esta fue una lección esencial sobre manejar la interacción del usuario y actualizar la interfaz en función de propiedades reactivas.

2. Gestión de operadores: evitar entradas redundantes

Un desafío clave al crear una calculadora es garantizar que no se agreguen múltiples operadores consecutivamente (por ejemplo, evitar entradas como 3 4). Para solucionar esto, agregué una marca para reemplazar un operador si el último carácter ya es un operador:

const handleOperatorClick = (operator) => {
    if (/[ */-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1)   operator; // Replace the last operator
    } else {
        result.value  = operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

Este método garantiza que solo haya un operador presente al final de la cadena de entrada, lo que mejora la robustez de la calculadora.

3. Borrar y eliminar entradas

La calculadora debe proporcionar funcionalidad para borrar todas las entradas (usando el botón AC) o eliminar el último carácter ingresado (usando el botón DEL). Implementé estas dos acciones con los métodos clearAll y clear:

• Borrar todo (AC): restablece toda la entrada.

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

• Eliminar último carácter (DEL): elimina el último carácter de la cadena de entrada.

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

Este fue un ejercicio útil para manejar la manipulación de cadenas y brindar una experiencia de usuario fluida.

4. Realización de cálculos

Una de las funcionalidades principales de una calculadora es evaluar expresiones ingresadas por el usuario. Utilicé la función eval() incorporada de JavaScript para calcular el resultado de la expresión de entrada:

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

Si bien eval() es simple y eficaz para esta calculadora básica, he aprendido sobre los posibles riesgos de seguridad que plantea al manejar entradas arbitrarias del usuario. En proyectos futuros, puedo explorar la posibilidad de escribir un analizador personalizado para mejorar la seguridad y la flexibilidad.

5. Interfaz de usuario con Vue y Bootstrap

Para crear la interfaz de la calculadora, utilicé Bootstrap para un diseño rápido y responsivo. Los botones están dispuestos en una cuadrícula con codificación de colores adecuada para números y operadores:

    
7
    
8
    
9
    
-

Aprendí a combinar el manejo de eventos de Vue con las clases de Bootstrap para crear una interfaz de calculadora visualmente atractiva y responsive.

6. Manejo de casos extremos y mejora de la experiencia de usuario

Encontré varios casos extremos mientras construía la calculadora. Por ejemplo, después de realizar un cálculo, si un usuario ingresa un nuevo número, la calculadora debe restablecer el resultado anterior. Esto se solucionó comprobando el indicador calculado:

if (calculated.value) {
    result.value = value; // Replace the result with the new value
    calculated.value = false; // Reset the calculated flag
}

Otra característica útil fue formatear la pantalla para hacerla más intuitiva, como reemplazar automáticamente al último operador si el usuario cambia de opinión, mejorando la experiencia del usuario.

Pensamientos finales: lo que he ganado al crear una calculadora

Este proyecto proporcionó una inmersión profunda en el manejo de entradas dinámicas, la gestión del estado y la creación de una interfaz de usuario limpia utilizando Vue.js. Obtuve conocimientos prácticos en las siguientes áreas:

• Gestión de estado: Cómo rastrear y actualizar dinámicamente la entrada y el resultado del usuario.
• Manejo de eventos: Responder a las acciones del usuario (clics numéricos, clics del operador y cálculo de resultados).
• Consideraciones de UI/UX: Garantizar que la calculadora maneje los casos extremos con elegancia y proporcione una interfaz de usuario clara e intuitiva.
• Manipulación de cadenas: análisis y manipulación de cadenas de entrada para crear expresiones matemáticas válidas.

Crear esta calculadora fue una experiencia gratificante que fortaleció mi capacidad para administrar las entradas de los usuarios y crear aplicaciones web dinámicas e interactivas utilizando Vue.js. ¡Esperamos aplicar estas habilidades a proyectos más complejos!