📐 Figuras Geométricas

📖 Descripción Breve

Esta aplicación web permite a los usuarios calcular medidas geométricas básicas como área, perímetro y diámetro para figuras comunes: cuadrados, triángulos y círculos. Desarrollada con tecnologías web estándar (HTML, CSS y JavaScript), ofrece una interfaz intuitiva y responsiva para realizar cálculos matemáticos de manera rápida y precisa.

✨ Características Principales

• 🟦 Cálculos para Cuadrado: Perímetro y área con un solo lado.
• 🔺 Cálculos para Triángulo: Perímetro (tres lados) y área (base y altura).
• ⭕ Cálculos para Círculo: Diámetro, perímetro y área con el radio.
• ⚡ Interfaz Interactiva: Actualización en tiempo real de resultados.
• 🎨 Estilos Modernos: Tema azul profesional con efectos hover.

🖼️ Demo/Vistas Previas

Interfaz principal mostrando las secciones para calcular figuras geométricas.

Para una demo en vivo, abre index.html en tu navegador web o visita la demo en vivo.

🛠️ Tecnologías Utilizadas

Tecnología	Versión	Propósito
	5	Estructura de la página web
	3	Estilos y responsividad
	ES6+	Lógica de cálculos y manipulación DOM

🚀 Instalación y Configuración

Este proyecto es una aplicación web estática, por lo que no requiere instalación de dependencias complejas. Solo necesitas un navegador moderno.

Pasos de Instalación:

1. Clona o descarga el repositorio:

   git clone https://github.com/Seb-RM/Javascript_Html_Css_Figuras-geometricas.git
   cd Javascript_Html_Css_Figuras-geometricas
   

2. Abre el archivo principal:

   • Navega al directorio del proyecto.
   • Abre index.html en tu navegador web preferido (Chrome, Firefox, Safari, etc.).

Requisitos del Sistema:

• Navegador web moderno con soporte para ES6+.
• No se requieren variables de entorno ni configuraciones adicionales.

📚 Guía de Uso

1. Accede a la aplicación: Abre index.html en tu navegador.

2. Selecciona una figura:

   • Cuadrado: Ingresa el lado y haz clic en "Perímetro" o "Área".
   • Triángulo: Para perímetro, ingresa los tres lados. Para área, ingresa base y altura.
   • Círculo: Ingresa el radio y selecciona el cálculo deseado.

3. Visualiza el resultado: El cálculo aparecerá en la sección de respuesta en la parte superior.

Ejemplos de Uso:

• Para un cuadrado de lado 5 cm: Perímetro = 20 cm, Área = 25 cm².
• Para un triángulo con base 6 cm y altura 4 cm: Área = 12 cm².
• Para un círculo de radio 3 cm: Diámetro = 6 cm, Perímetro ≈ 18.84 cm, Área ≈ 28.27 cm².

⚙️ Explicación Técnica

📁 index.html

Propósito: Archivo principal HTML que define la estructura de la página web, incluyendo el encabezado, secciones de entrada para cada figura y el área de resultados.

Conceptos Clave:

• Estructura semántica HTML5 (header, section, div).
• Formularios con inputs numéricos.
• Enlaces a archivos CSS y JS externos.

Fragmentos Destacados:

<!-- Sección de respuesta para mostrar resultados -->
<div class="answer">
    <p id='result'></p>
</div>

<!-- Input para lado del cuadrado -->
<input class="box-main__input" type="number" name="inputSide" id="inputSide" placeholder="Ingrese los lados">

API/DOM: Utiliza elementos HTML estándar. El JavaScript manipula el DOM accediendo a elementos por ID (ej: document.getElementById("result")) para actualizar el texto de resultados.

📁 js/funcionesGeometricas.js

Propósito: Módulo JavaScript que implementa las funciones matemáticas para cálculos geométricos y maneja los eventos de usuario.

Conceptos Clave:

• Patrón de módulo IIFE (Immediately Invoked Function Expression) para encapsulamiento.
• Manipulación del DOM para obtener valores de inputs y actualizar resultados.
• Event listeners para botones.
• Funciones puras para cálculos matemáticos.

Fragmentos Destacados:

// Función para calcular perímetro de cuadrado
const perimSquare = (side) => side * 4;

// Event listener para botón de perímetro cuadrado
btnPerimSquare.addEventListener("click", () => {
    let inputSide = document.getElementById("inputSide");
    let value = Number(inputSide.value);
    const result = `El perímetro de Cuadrado es: ${perimSquare(value)} cm`;
    valueResult.innerText = result;
});

API/DOM:

• Manejo de DOM: Selección de elementos con document.getElementById() y document.querySelector().
• Eventos: Uso de addEventListener() para capturar clics en botones.
• Flujo de Datos: Input del usuario → Conversión a número → Cálculo matemático → Actualización del DOM con resultado.
• Estado: No mantiene estado persistente; cálculos son stateless.

📁 css/main.css

Propósito: Hoja de estilos que define la apariencia visual de la aplicación, incluyendo layout, colores y responsividad.

Conceptos Clave:

• CSS Grid implícito con floats para layout de cajas.
• Media queries para responsividad.
• Pseudo-clases para efectos interactivos (:hover, :active).

Fragmentos Destacados:

/* Layout responsivo */
@media screen and (max-width:640px) {
    .box {
        width: 90%;
        margin: 20px;
        height: auto;
    }
}

/* Efectos en botones */
.box-main__btn:hover {
    background-color: #1b2550;
    cursor: pointer;
}

API/DOM: No interactúa directamente con DOM; define estilos aplicados por el navegador. Consideraciones de UX incluyen transiciones suaves y feedback visual en hover.

🎯 Arquitectura

Esta es una aplicación de página única (SPA) simple con arquitectura basada en módulos:

index.html (Estructura)
├── css/main.css (Estilos)
└── js/funcionesGeometricas.js (Lógica)

• Patrón de Diseño: Módulo revelador con IIFE para evitar contaminación del scope global.
• Flujo de Aplicación: Página estática → Usuario interactúa con inputs/botones → JS calcula y actualiza DOM → Resultado mostrado.
• Separación de Responsabilidades: HTML para estructura, CSS para presentación, JS para comportamiento.

El proyecto sigue principios de desarrollo web moderno: semántica HTML, estilos modulares y JavaScript funcional.