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
L
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
<html lang="es">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<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>
<img alt="Colecci贸n de Moda" height="300" src="esquema.png" width="800" />
<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>
<div id="dise帽o"></div>
<div id="colores"></div>
<script>
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
Comentarios
Publicar un comentario
Dejanos tus dudas y comentarios