🎨 CSS Changer

¡Bienvenido a CSS Changer! Esta es una aplicación web sencilla y divertida creada con HTML, JavaScript y CSS puro. Permite modificar dinámicamente las propiedades CSS de una imagen mediante controles interactivos, como cambiar el color de fondo, el ancho, el radio de borde, el padding y el desenfoque. Es perfecta para experimentar con estilos CSS y entender cómo afectan visualmente a los elementos.

✨ Características

• Controles intuitivos: Usa sliders y un selector de color para ajustar propiedades en tiempo real.
• Vista previa inmediata: Los cambios se aplican instantáneamente a la imagen.
• Interfaz amigable: Diseño centrado con gradientes y sombras para una experiencia visual atractiva.
• Ligero y sin dependencias: Funciona solo con tecnologías web básicas.

🔧 Funcionamiento

La aplicación consta de una página web con controles en la parte superior y una imagen de ejemplo abajo. Cada control corresponde a una propiedad CSS específica:

• Base Color: Cambia el color de fondo de la imagen.
• Width: Ajusta el ancho de la imagen en porcentaje.
• Border Radius: Modifica el radio de las esquinas para hacerlas más redondeadas.
• Padding: Agrega espacio interno alrededor de la imagen.
• Blur: Aplica un efecto de desenfoque a la imagen.

Al mover los sliders o seleccionar un color, la imagen se actualiza automáticamente, mostrando cómo estas propiedades afectan su apariencia.

🛠 Tecnologías Utilizadas

• HTML5: Estructura básica de la página y elementos de formulario.
• CSS3: Estilos, incluyendo variables CSS personalizadas para la manipulación dinámica.
• JavaScript (ES6): Lógica para manejar eventos y actualizar estilos en tiempo real.

📖 Cómo Usar la Aplicación

1. Abre el archivo index.html en tu navegador web.
2. Interactúa con los controles:
   • Selecciona un color con el picker de color.
   • Mueve los sliders para ajustar ancho, borde, padding y blur.
3. Observa cómo la imagen cambia en tiempo real.

¡Es tan simple como eso! Ideal para aprender o demostrar conceptos de CSS.

📥 Descarga e Instalación

Para descargar el código desde GitHub:

1. Ve al repositorio en GitHub (reemplaza con el enlace real).

2. Haz clic en "Code" > "Download ZIP" o clona el repositorio con:

   git clone https://github.com/Seb-RM/Javascript_Html_Css-CSS-Changer.git
   

3. Abre index.html en tu navegador. No se requieren dependencias adicionales.

💡 Fragmentos de Código Destacados

Aquí explicamos algunos fragmentos clave del código JavaScript, enfocándonos en el manejo del DOM y la funcionalidad principal:

Selección de Elementos y Eventos

const inputs = document.querySelectorAll('.css-container input');

Este código selecciona todos los elementos <input> dentro del contenedor .css-container. Utiliza querySelectorAll para obtener una NodeList de elementos, permitiendo manipular múltiples controles de manera eficiente.

inputs.forEach(input => input.addEventListener("change", update));

Aquí, se añade un event listener a cada input para el evento "change". Cuando el usuario ajusta un control, se dispara la función update. Esto demuestra el manejo de eventos en JavaScript, crucial para la interactividad.

Función de Actualización

function update() {
    const suffixData = this.dataset.sizing || '';
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffixData);
}

Esta función es el corazón de la aplicación. Al cambiar un input:

• Obtiene el sufijo (como "%" o "px") del atributo data-sizing.
• Usa setProperty para actualizar una variable CSS personalizada en :root (el elemento raíz del documento).
• Conceptos aplicados: Manipulación del DOM vía document.documentElement, uso de CSS custom properties para estilos dinámicos, y concatenación de valores con sufijos para unidades correctas.

En CSS, estas variables se aplican así:

img {
    width: var(--width);
    background-color: var(--base);
    /* etc. */
}

Esto permite cambios en tiempo real sin modificar directamente el CSS, mostrando una separación clara entre lógica y presentación.