Ejercicio bucle o ciclo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi historia fantástica</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#cuento {
margin-top: 20px;
padding: 15px;
border: 1px solid #ccc;
background-color: #eef;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Completa el formulario para crear tu historia</h2>
<form id="formulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" required><br><br>
<label for="edad">Edad:</label>
<input type="number" id="edad" required><br><br>
<label for="animal">Animal favorito:</label>
<input type="text" id="animal" required><br><br>
<label for="deporte">Deporte favorito:</label>
<input type="text" id="deporte" required><br><br>
<label for="dias">¿Cuántos días de amistad quieres mostrar? (máx. 5):</label>
<input type="number" id="dias" min="1" max="5" required><br><br>
<button type="submit">Crear historia</button>
</form>
<div id="cuento"></div>
<script>
document.getElementById('formulario').addEventListener('submit', function(event) {
event.preventDefault();
const nombre = document.getElementById('nombre').value.trim();
const edad = document.getElementById('edad').value.trim();
const animal = document.getElementById('animal').value.trim().toLowerCase();
const deporte = document.getElementById('deporte').value.trim().toLowerCase();
const diasInput = parseInt(document.getElementById('dias').value);
const dias = Math.min(Math.max(diasInput, 1), 5); // Asegura que esté entre 1 y 5
let frasesAmistad = "";
for (let i = 1; i <= dias; i++) {
frasesAmistad += `🧡 Día ${i}: El ${animal} me acompañó fielmente durante mi entrenamiento de ${deporte}.<br>`;
}
const historia = `
<strong>Hola, me llamo ${nombre}</strong>, tengo ${edad} años, y esta es mi historia:<br><br>
Una mañana soleada decidí salir a practicar mi deporte favorito: <strong>${deporte}</strong>. Me encanta cómo me siento libre cada vez que lo practico.<br><br>
Mientras caminaba hacia el parque, escuché un sonido extraño proveniente de un arbusto. Con cuidado me acerqué y, para mi sorpresa, descubrí a un pequeño <strong>${animal}</strong> que parecía perdido y asustado.<br><br>
Aunque no sabía jugar ${deporte}, el ${animal} me acompañó todo el camino. A partir de ese día, se convirtió en mi fiel compañero.<br><br>
${frasesAmistad}
Juntos pasamos muchas tardes inolvidables. Aprendí que no todos tienen que compartir tus pasiones para ser especiales. A veces, solo necesitas alguien que te acompañe y te haga sonreír.<br><br>
Así fue como el ${animal} y yo vivimos una amistad que ningún deporte podría superar. ¡Una historia que jamás olvidaré!
`;
document.getElementById('cuento').innerHTML = historia;
});
</script>
</body>
</html>
EJERCICIO 2
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi historia fantástica</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#cuento {
margin-top: 20px;
padding: 15px;
border: 1px solid #ccc;
background-color: #eef;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Completa el formulario para crear tu historia</h2>
<form id="formulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" required><br><br>
<label for="edad">Edad:</label>
<input type="number" id="edad" required><br><br>
<label for="animal">Animal favorito:</label>
<input type="text" id="animal" required><br><br>
<label for="deporte">Deporte favorito:</label>
<input type="text" id="deporte" required><br><br>
<label for="dias">¿Cuántos días de amistad quieres mostrar? (máx. 5):</label>
<input type="number" id="dias" min="1" max="5" required><br><br>
<button type="submit">Crear historia</button>
</form>
<div id="cuento"></div>
<script>
document.getElementById('formulario').addEventListener('submit', function(event) {
event.preventDefault();
const nombre = document.getElementById('nombre').value.trim();
const edad = document.getElementById('edad').value.trim();
const animal = document.getElementById('animal').value.trim().toLowerCase();
const deporte = document.getElementById('deporte').value.trim().toLowerCase();
const diasInput = parseInt(document.getElementById('dias').value);
const dias = Math.min(Math.max(diasInput, 1), 5); // Limita entre 1 y 5
// Lista de 15 frases posibles
const frases = [
"me observó en silencio con ojos brillantes mientras entrenaba.",
"me trajo una ramita, como queriendo jugar mientras yo entrenaba.",
"se quedó dormido bajo el árbol mientras yo hacía deporte.",
"me miraba como si entendiera lo que yo sentía al correr.",
"me siguió dando pequeños saltitos mientras hacía estiramientos.",
"se acurrucó a mi lado mientras descansaba después de entrenar.",
"parecía aplaudir con sus patas cada vez que terminaba una rutina.",
"me inspiró a no rendirme cuando me sentía cansado.",
"corrió conmigo un rato, aunque se cansó muy rápido.",
"esperaba en silencio cada vez que me alejaba a entrenar.",
"me motivó solo con su presencia fiel y tranquila.",
"me miró feliz cuando terminé mi ejercicio diario.",
"me recibió con un sonido suave cuando terminé.",
"lamió mi mano como diciéndome 'bien hecho'.",
"se sentó junto a mi botella de agua como un guardián."
];
let frasesAmistad = "";
for (let i = 1; i <= dias; i++) {
const indice = Math.floor(Math.random() * frases.length);
frasesAmistad += `🧡 Día ${i}: El ${animal} ${frases[indice]}<br>`;
}
const historia = `
<strong>Hola, me llamo ${nombre}</strong>, tengo ${edad} años, y esta es mi historia:<br><br>
Una mañana soleada decidí salir a practicar mi deporte favorito: <strong>${deporte}</strong>. Me encanta cómo me siento libre cada vez que lo practico.<br><br>
Mientras caminaba hacia el parque, escuché un sonido extraño proveniente de un arbusto. Con cuidado me acerqué y, para mi sorpresa, descubrí a un pequeño <strong>${animal}</strong> que parecía perdido y asustado.<br><br>
Aunque no sabía jugar ${deporte}, el ${animal} me acompañó todo el camino. A partir de ese día, se convirtió en mi fiel compañero.<br><br>
${frasesAmistad}
Juntos pasamos muchas tardes inolvidables. Aprendí que no todos tienen que compartir tus pasiones para ser especiales. A veces, solo necesitas alguien que te acompañe y te haga sonreír.<br><br>
Así fue como el ${animal} y yo vivimos una amistad que ningún deporte podría superar. ¡Una historia que jamás olvidaré!
`;
document.getElementById('cuento').innerHTML = historia;
});
</script>
</body>
</html>
Comentarios
Publicar un comentario