🎨🔹 Generador de Combinaciones de Moda con JavaScript: Crea Atuendos y Colores Aleatorios

Hemos desarrollado una sencilla aplicación web con HTML, CSS y JavaScript que permite seleccionar un diseño aleatorio y generar combinaciones de colores perfectas para tu atuendo.

👗 ¿Cómo funciona?
✔ Presiona el botón "Diseño a Vestir" para ver una propuesta de atuendo.
✔ Luego, presiona "Colores a Combinar" para obtener una sugerencia de colores armoniosos.
✔ ¡Experimenta con distintas combinaciones y encuentra tu estilo único!

Puedes probarlo aquí: 🔗 Combinaciones de ropa y colores

Ejemplo de un generador de combinaciones de moda con JavaScript y HTML, ideal para programadores juniors que quieren mejorar en manipulación del DOM.

Si te interesa aprender cómo se hizo, revisa el código en la publicación y anímate a personalizarlo. ¡Déjame tu comentario con tu combinación favorita! 👇😃

Te comparto el código

<head>

<title>Combinaciones de Ropa</title>

<style>

body {

text-align: center;

font-family: Arial, sans-serif;

}

#diseño, #colores {

margin: 20px;

padding: 10px;

border: 2px solid black;

display: inline-block;

}

.color-box {

width: 100px;

height: 100px;

display: inline-block;

margin: 5px;

}

</style>

</head>

<body>

<h1>Combinaciones de Ropa</h1>

<p>Esta página es un ejemplo de cómo mostrar combinación de colores</p>

<p>Primero mi colección de moda ProgramacionParaTodos 2020</p>

<p>Presiona el botón de Diseño a Vestir para elegir un modelo y después el botón Colores a Combinar para saber cuáles utilizar.</p>

<button onclick="mostrarDiseño()">Diseño a Vestir</button>

<button onclick="mostrarColores()">Colores a Combinar</button>

const imagenes = [

"esquema1.PNG",

"esquema2.PNG",

"esquema3.PNG",

"esquema4.PNG",

"esquema5.PNG",

"esquema6.PNG"

];

function mostrarDiseño() {

let numAtuendo = Math.floor(Math.random() * imagenes.length);

document.getElementById("diseño").innerHTML = `<img src="${imagenes[numAtuendo]}" alt="Diseño ${numAtuendo + 1}" height="200">`;

}

function mostrarColores() {

let colores = [

"#33558B", "#FEAF12", "#4EC4A4", "#565C46", "#E9AC9D", "#A2553A", "#72617C", "#EFDAB4"

];

let combinacion = [];

while (combinacion.length < 4) {

let color = colores[Math.floor(Math.random() * colores.length)];

if (!combinacion.includes(color)) {

combinacion.push(color);

}

document.getElementById("colores").innerHTML = combinacion.map(color => `<div class='color-box' style='background-color: ${color};'></div>`).join('');

}

</script>

</body>

</html>.

Estructura HTML

El HTML define la interfaz del generador de combinaciones. La estructura básica puede incluir:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Combinaciones de Moda</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Generador de Combinaciones de Moda</h1>
    <button id="generarAtuendo">Diseño a Vestir</button>
    <button id="generarColores">Colores a Combinar</button>
    <div id="resultado"></div>
    <script src="script.js"></script>
</body>
</html>

Explicación:

Se definen dos botones: uno para generar atuendos y otro para sugerir colores.
La <div id="resultado"> es donde se mostrará la combinación generada.
Se enlazan hojas de estilo (styles.css) y el código JavaScript (script.js).

2. Estilos con CSS

El CSS mejora la apariencia del generador. Ejemplo de estilos:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    font-size: 16px;
}

#resultado {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}

Explicación:

Se usa text-align: center; para centrar los elementos.
Los botones tienen un fondo azul con texto blanco y efectos al pasar el cursor.
El área de resultado tiene un tamaño de fuente más grande para destacar la combinación generada.

3. JavaScript en acción

Aquí es donde ocurre la magia del generador.

const atuendos = ["Casual", "Formal", "Deportivo", "Elegante", "Streetwear"];
const colores = ["Rojo", "Azul", "Verde", "Negro", "Blanco", "Amarillo"];

document.getElementById("generarAtuendo").addEventListener("click", () => {
    const atuendoAleatorio = atuendos[Math.floor(Math.random() * atuendos.length)];
    document.getElementById("resultado").innerText = `Atuendo sugerido: ${atuendoAleatorio}`;
});

document.getElementById("generarColores").addEventListener("click", () => {
    const color1 = colores[Math.floor(Math.random() * colores.length)];
    const color2 = colores[Math.floor(Math.random() * colores.length)];
    document.getElementById("resultado").innerText = `Colores sugeridos: ${color1}

Aquí tienes la explicación detallada para cada sección:

1. Estructura HTML

El HTML define la interfaz del generador de combinaciones. La estructura básica puede incluir:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Combinaciones de Moda</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Generador de Combinaciones de Moda</h1>
    <button id="generarAtuendo">Diseño a Vestir</button>
    <button id="generarColores">Colores a Combinar</button>
    <div id="resultado"></div>
    <script src="script.js"></script>
</body>
</html>

Explicación:

Se definen dos botones: uno para generar atuendos y otro para sugerir colores.
La <div id="resultado"> es donde se mostrará la combinación generada.
Se enlazan hojas de estilo (styles.css) y el código JavaScript (script.js).

2. Estilos con CSS

El CSS mejora la apariencia del generador. Ejemplo de estilos:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    font-size: 16px;
}

#resultado {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}

Explicación:

Se usa text-align: center; para centrar los elementos.
Los botones tienen un fondo azul con texto blanco y efectos al pasar el cursor.
El área de resultado tiene un tamaño de fuente más grande para destacar la combinación generada.

3. JavaScript en acción

Aquí es donde ocurre la magia del generador.

const atuendos = ["Casual", "Formal", "Deportivo", "Elegante", "Streetwear"];
const colores = ["Rojo", "Azul", "Verde", "Negro", "Blanco", "Amarillo"];

document.getElementById("generarAtuendo").addEventListener("click", () => {
    const atuendoAleatorio = atuendos[Math.floor(Math.random() * atuendos.length)];
    document.getElementById("resultado").innerText = `Atuendo sugerido: ${atuendoAleatorio}`;
});

document.getElementById("generarColores").addEventListener("click", () => {
    const color1 = colores[Math.floor(Math.random() * colores.length)];
    const color2 = colores[Math.floor(Math.random() * colores.length)];
    document.getElementById("resultado").innerText = `Colores sugeridos: ${color1} y ${color2}`;
});

Explicación:

Se definen dos arreglos: uno con tipos de atuendos y otro con colores.
Se usa Math.random() para seleccionar aleatoriamente un atuendo o colores.
document.getElementById("resultado").innerText actualiza el texto en la página.
Se agregan addEventListener("click", function) a los botones para ejecutar la función al hacer clic.

Conclusión

Este proyecto es un excelente ejemplo de cómo usar JavaScript para interactuar con el usuario y generar contenido dinámico. Puedes mejorarlo agregando imágenes, más opciones de atuendos y combinaciones de colores avanzadas con librerías como chroma.js

Cómo conectar la API de Banxico con Google Sheets usando Apps Script