Calculadora_Basica_en_HTML_CSS_y_JavaScript

Calculadora

Índice

1. Descripción
2. Instalación
3. Herramientas Utilizadas
4. Uso
5. Estructura del Código
6. Requisitos
7. Licencia
8. Autor

Descripción

Esta calculadora es una aplicación web que permite realizar operaciones matemáticas básicas con dos números. Utilizando JavaScript para la lógica, CSS para el estilo y HTML para la estructura.

Instalación

1. Asegúrate de tener un navegador web moderno instalado en tu sistema.
2. Descarga o clona el repositorio desde GitHub con el siguiente comando:

   git clone https://github.com/Mogollo7/Calculadora_Basica_en_HTML_CSS_y_JavaScript.git

3. Navega a la carpeta del proyecto:

   cd Calculadora_Basica_en_HTML_CSS_y_JavaScript
   

4. Abre el archivo index.html en tu navegador para comenzar a usar la calculadora.

Herramientas Utilizadas

• HTML: Se utilizó HTML para crear la estructura básica de la calculadora, que incluye botones, campos de entrada y la disposición de la interfaz de usuario. La interfaz está organizada mediante una grilla en HTML, lo que permitió optimizar no solo la disposición de los elementos, sino también mejorar la funcionalidad general.

• CSS: Se aplicó CSS para estilizar la calculadora, lo que resultó en una apariencia visual atractiva y una mejor experiencia para el usuario. Se eligió una paleta de colores azul, que se utilizó en los botones.

• JavaScript: Se utilizó JavaScript para implementar la lógica de la calculadora, lo que permite realizar operaciones matemáticas básicas y gestionar la interacción del usuario con la interfaz de manera efectiva.

• Editor de Código: Se recomienda utilizar Visual Studio Code para editar el código. Para facilitar el desarrollo, se sugiere instalar la extensión Live Server en Visual Studio Code, que permite ver los cambios en vivo al realizar ajustes.

• Navegador Web: Cualquier navegador moderno (como Chrome, Firefox o Edge) puede ser utilizado para ejecutar la calculadora y probar su funcionalidad. En este caso, se utilizó Microsoft Edge para realizar las pruebas.

Uso

En la parte de entrada, los usuarios pueden ingresar dos números en los campos correspondientes. El área de salida muestra el resultado de la operación seleccionada. Para realizar una operación, simplemente se debe presionar el botón correspondiente a la operación deseada, como suma, resta, multiplicación o división. Según el botón presionado, la calculadora ejecutará la operación adecuada sobre los números ingresados y mostrará el resultado en el área de salida.

Estructura del Código

La calculadora está compuesta por tres archivos principales: HTML, CSS y JavaScript. A continuación se detalla la función de cada uno:

1. HTML (index.html)

   • Este archivo define la estructura de la interfaz de la calculadora. Contiene elementos como campos de entrada para los dos números, botones para cada operación matemática y un área destinada a mostrar el resultado.

2. CSS (styles.css)

   • El archivo CSS se encarga de estilizar la calculadora, mejorando su apariencia visual y la experiencia del usuario.

3. JavaScript (script.js)

   • Este archivo contiene la lógica que permite realizar las operaciones matemáticas. A través de funciones, toma los valores ingresados en los campos de entrada, realiza la operación correspondiente al botón presionado y actualiza el área de salida con el resultado.
   • Nota: Se puede incluir todo el código JavaScript directamente dentro del archivo HTML utilizando la etiqueta <script>. Sin embargo, se optó por mantener el JavaScript en un archivo separado para mejorar la organización y legibilidad del código. Esto permite una mejor separación de las preocupaciones, facilitando el mantenimiento y la reutilización del código en proyectos futuros en clase.

Calculadora

Requisitos

Para poder ejecutar este proyecto, asegúrate de contar con los siguientes requisitos:

1. Navegador web moderno:

   • Se recomienda utilizar Google Chrome, Firefox, Safari o Microsoft Edge. Asegúrate de que tu navegador esté actualizado a la última versión para garantizar una experiencia óptima.

2. Opcionales:

   • Visual Studio Code:

     • Descarga e instala Visual Studio Code como tu entorno de desarrollo. Esta aplicación te proporcionará herramientas útiles para editar el código HTML, CSS y JavaScript de manera eficiente.

   • Extensión Live Server:

     • Se recomienda instalar la extensión Live Server en Visual Studio Code para poder ver los cambios en tiempo real. Esta extensión permite iniciar un servidor local y abrir tu proyecto en el navegador automáticamente, facilitando la visualización de las modificaciones realizadas en el código.

3. Sistema operativo:

   • Este proyecto puede ejecutarse en cualquier sistema operativo que soporte un navegador moderno, incluyendo Windows, macOS y Linux.

Licencia

Este proyecto está licenciado bajo la MIT License.

Autor

Juan Sebastián Martínez Galeano