Calculadora

Esta calculadora es una aplicación web interactiva que simula la funcionalidad de una calculadora de escritorio, combinando operaciones aritméticas básicas con funciones científicas avanzadas y una útil capacidad de memoria. Diseñada con una interfaz de usuario limpia y responsiva, permite a los usuarios realizar cálculos complejos, gestionar el historial de memoria de forma visible y cambiar el signo de los números con facilidad. Su desarrollo se centró en la precisión lógica y una experiencia de usuario fluida, adaptando dinámicamente el tamaño de la fuente en el display para números largos y proporcionando un control intuitivo sobre cada operación.

• Operaciones Aritméticas Básicas:

  Realiza sumas, restas, multiplicaciones y divisiones.

• Operaciones Avanzadas:

  Incluye funciones para porcentaje (%), recíproco (1/x), cuadrado (x^2), y raíz cuadrada (sqrt{x}).

• Gestión de Signos:

  Permite cambiar el signo de un número (+/-).

• Manejo de Entrada:

  Admite números con decimales y gestiona la entrada de dígitos de manera intuitiva.

• Historial de Memoria:

  Implementa una funcionalidad de memoria (M+, M-, MR, MC) con una lista visible de valores guardados, permitiendo al usuario almacenar y recuperar números.

• Feedback Visual:

  Muestra la operación actual y el resultado en pantallas separadas, mejorando la experiencia del usuario. El tamaño de la fuente del resultado se ajusta dinámicamente según la longitud para asegurar la visibilidad.

• Controles de Borrado:

  Ofrece opciones para borrar la última entrada (Backspace), borrar la entrada actual (C) o borrar todo (CE).

• Manipulación del DOM:

  Se utiliza document.querySelectorAll y document.querySelector para acceder a los elementos HTML de la calculadora, y se manipulan sus propiedades textContent y style para actualizar la interfaz.

• const displayResult = document.querySelector('.display-result');
  const buttons = document.querySelectorAll('.calculator-button');
  displayResult.textContent = result;
  displayResult.style.fontSize = adjustFontSize(result.length);

• Manejo de Eventos:

  Se emplean addEventListener("mousedown", ...) para detectar las interacciones del usuario con los botones, lo que permite ejecutar las funciones correspondientes a cada acción.

• buttons.forEach(button => {
      button.addEventListener('mousedown', (e) => {
          // Lógica basada en el botón clickeado
          console.log(e.target.textContent);
      });
  });

• Manejo de entrada de números y actualización del display:

  La función SelectNumberPress maneja la entrada de números y actualiza el display, asegurando que los resultados se borren para nuevas entradas y que los números se añadan de forma incremental.

• function SelectNumberPress(number) {
      if (displayResult.textContent == 0 || resultObtained) {
          displayResult.textContent = number;
          resultObtained = false;
      } else {
          displayResult.textContent += number;
      }
      newNumberEntered = true;
  }

• Lógica de Operaciones:

  La función SelectOperation gestiona la lógica central de la calculadora, manejando el estado de los números, operadores y resultados intermedios. Llama a ValidateOperation para realizar cálculos cuando se selecciona una nueva operación después de un número.

• function SelectOperation(operator) {
      if (numberOne == 0) {
          numberOne = Number(displayResult.textContent);
      } else if (newNumberEntered) {
          numberTwo = Number(displayResult.textContent);
          ValidateOperation();
          displayResult.textContent = numberOne;
      }
      operationRealized = operator;
      newNumberEntered = false;
  }

• Funcionalidad de Memoria:

  La implementación de la memoria es un punto clave, con funciones para añadir, restar, recuperar y limpiar valores, junto con una interfaz dinámica para ver los elementos guardados. La función AddMemory, por ejemplo, añade un número al array de memoria y actualiza la visualización.

• function AddMemory(number) {
      memory.push(Number(number));
      UpdateMemoryList(); // Función para actualizar visualmente la lista de memoria
  }

• Gestión del Estado de la Calculadora:

  Mantener el control preciso de los números (numberOne, numberTwo), la operación actual y los indicadores (resultObtained, newNumberEntered) para garantizar que las operaciones se encadenen correctamente y el display refleje el estado exacto.

• Manejo de Precedencia y Encadenamiento de Operaciones:

  Asegurar que operaciones consecutivas (ej. 2 + 3 * 4) o el uso del botón = varias veces sigan la lógica esperada, gestionando cuándo se calcula un resultado intermedio y cuándo se inicia una nueva operación.

• Dinámica del Display:

  Ajustar el tamaño de la fuente del display de resultado para números muy largos y manejar la visualización de decimales y ceros iniciales de forma coherente.

• Implementación de Funciones de Memoria:

  Desarrollar un sistema robusto para añadir, restar, recuperar y limpiar elementos de la memoria, incluyendo su visualización en una lista desplegable.

• Importancia del Manejo de Estado:

  Comprendí a fondo cómo la gestión de variables de estado es fundamental en aplicaciones interactivas para controlar el flujo y el comportamiento del usuario.

• Diseño de Lógica Clara:

  Aprendí a descomponer un problema complejo (operaciones de calculadora) en funciones más pequeñas y manejables, lo que mejora la legibilidad y el mantenimiento del código.

• Interacción con el DOM:

  Reforcé mis habilidades en la manipulación dinámica de elementos HTML y la escucha de eventos para crear una interfaz de usuario responsiva y funcional.

• Resolución de Casos Extremos:

  La necesidad de manejar situaciones como la división por cero, la entrada de múltiples decimales o secuencias de operaciones no estándar me enseñó sobre la importancia de la validación y el manejo de errores.

• Historial de Operaciones:

  Podrías añadir un registro visual de las operaciones completadas, similar a cómo algunas calculadoras muestran las últimas ecuaciones.

• Manejo de Errores:

  Implementar manejo para divisiones por cero o entradas inválidas, mostrando mensajes de error amigables en el displayResult.

• Teclado Numérico:

  Permitir la interacción con la calculadora a través del teclado físico del usuario para los números y operadores.

• Más Funciones Científicas:

  Si te interesa, podrías expandirla para incluir funciones trigonométricas, logaritmos, etc.

• Diseño Responsivo:

  Asegurarse de que la calculadora se vea y funcione bien en diferentes tamaños de pantalla (aunque esto sería más de CSS, complementaría el proyecto).

• Accesibilidad:

  Mejorar la accesibilidad para usuarios con discapacidades, por ejemplo, añadiendo atributos ARIA.