Solución ejercicio 9

2026-06-01 18:48:46 -03:00
17 changed files with 336 additions and 348 deletions
--- a/ejercicio1/ejercicio1.js
+++ b/ejercicio1/ejercicio1.js
@@ -1,18 +1 @@
 // Agregar aquí el código javascript
 // Crear una página con un campo de texto y un botón. Al hacer clic en el botón,
 // leer el valor del campo y mostrar en la página el mensaje `"Hola, [nombre]!"`.
 // Si el campo está vacío, mostrar en su lugar `"Por favor, ingresá tu nombre."`.
 let saludo = document.querySelector("#saludo");
 let boton = document.querySelector("#enviar");
 let form = document.querySelector("form");
 let nombre = document.querySelector("#input-nombre");
 form.addEventListener("submit", (e) => {
    e.preventDefault();
    if (nombre.value.trim() === ""){
        saludo.textContent = "Por favor, ingresá tu nombre.";
    } else {saludo.textContent = `Hola ${nombre.value}!`}
 })
--- a/ejercicio1/index.html
+++ b/ejercicio1/index.html
@@ -8,13 +8,6 @@
    </head>
    <body>
        <h1>Ejercicio 1</h1>
        <p>Ingrese su nombre</p>
        <form action="">
            <label for="input-nombre"></label>
            <input type="text" name="input-nombre" id="input-nombre">
            <button type="submit" id="enviar-form">ver</button>
        </form>
        <p id="saludo"></p>
        <script src="ejercicio1.js"></script>
    </body>
--- a/ejercicio2/ejercicio2.js
+++ b/ejercicio2/ejercicio2.js
@@ -1,21 +1 @@
 // Agregar aquí el código javascript
 // Crear una página con un campo de texto y un botón "Agregar". Cada vez que se
 // haga clic en el botón, agregar el texto del campo como un nuevo ítem en una
 // lista `<ul>`. Después de agregar el ítem, limpiar el campo.
 // Si el campo está vacío al hacer clic, no agregar nada.
 let input = document.querySelector("input") //almacenamos en variables el boton, el input y la lista
 let boton = document.querySelector("button");
 let lista = document.querySelector("ul")
 boton.addEventListener("click", ()=>{ // creamos el listener "click" con la funcion
    if (!(input.value.trim() === "")){ // si el input NO ESTÁ vacio, continuamos : 
        nuevoLi = document.createElement("li"); //creamos el li ,
        nuevoLi.textContent = input.value.trim(); // le damos contenido ,
        lista.appendChild(nuevoLi); // lo anexamos a la lista ,
        input.value = ""; // y vaciamos el input :)
    }
 })
 // fin
--- a/ejercicio2/index.html
+++ b/ejercicio2/index.html
@@ -8,13 +8,7 @@
    </head>
    <body>
        <h1>Ejercicio 2</h1>
-        <p>escriba un texto para agregar a la lista</p>
+
        <br>
        <input type="text" name="input" id="input">
        <button id="boton-agregar">Agregar</button> 
        <br>
        <ul>
        </ul>
        <script src="ejercicio2.js"></script>
    </body>
 </html>
--- a/ejercicio3/ejercicio3.js
+++ b/ejercicio3/ejercicio3.js
@@ -1,15 +1 @@
 // Agregar aquí el código javascript
 // Crear una lista con al menos seis ítems de cualquier contenido. Al hacer clic
 // en un ítem, agregarle la clase `"seleccionado"`. Al hacer clic de nuevo sobre
 // el mismo ítem, quitarle la clase.
 // Usar delegación de eventos, incluyendo un solo listener en la lista, no uno por
 // ítem.
 let lista = document.querySelector("ul");
 lista.addEventListener("click", (e)=>{
    e.target.classList.toggle("defensor-elegido"); //usamos el toggle para agregar/sacar la clase defensor-elegido
    console.log(e.target.classList)
 })
--- a/ejercicio3/index.html
+++ b/ejercicio3/index.html
@@ -8,15 +8,7 @@
    </head>
    <body>
        <h1>Ejercicio 3</h1>
-        <p>Defensores convocados</p>
+
        <ul>
            <li class="defensor">Romero</li>
            <li class="defensor">Senesi</li>
            <li class="defensor">Tagliafico</li>
            <li class="defensor">Molina</li>
            <li class="defensor">Barco</li>
            <li class="defensor">Martinez</li>
        </ul>
        <script src="ejercicio3.js"></script>
    </body>
 </html>
--- a/ejercicio4/ejercicio4.js
+++ b/ejercicio4/ejercicio4.js
@@ -1,34 +1 @@
 // Agregar aquí el código javascript
 // Crear una página con tres elementos: un botón "Sumar", un botón "Restar" y un
 // párrafo que muestre el valor actual del contador, empezando en `0`.
 // Requisitos:
 // - El contador no puede bajar de `0` ni subir de `10`.
 // - Cuando el contador llega a `10`, el botón "Sumar" se deshabilita.
 // - Cuando el contador llega a `0`, el botón "Restar" se deshabilita.
 // - Al volver a un valor intermedio, los botones se vuelven a habilitar.
 let botonSumar = document.querySelector("#botonSumar");
 let botonRestar = document.querySelector("#botonRestar");
 let numero = document.querySelector("#numero");
 botonSumar.addEventListener("click", (e)=>{
        if(numero.textContent < 9){ // siempre que numero < 9 queremos que se ejecute el codigo (supongamos numero = 8)
       ++numero.textContent; // numero = 9
       botonRestar.disabled = false; //habilitamos el restar en caso de que no esté habilitado
    } else if (numero.textContent == 9) { // solamente en caso de numero = 9 se ejecuta este else if
        ++numero.textContent; // numero = 10
        botonSumar.disabled = true; // ya no queremos seguir sumando, ergo, desactivamos el boton sumar
    }
 })
 botonRestar.addEventListener("click", (e)=>{
    if(numero.textContent > 1){ // supongamos que en esta instancia numero = 2 
       --numero.textContent; //  // ahora numero = 1
       botonSumar.disabled = false // (esta linea la ejecutamos por las dudas para asegurarnos de que se vuelva a habilitar al boton sumar en caso de estar desabilitado, pero solo seria necesaria si numero = 10)
    } else if (numero.textContent == 1) { 
        --numero.textContent; // ahora numero = 0
        botonRestar.disabled = true; // por lo tanto desabilitamos el boton 
    }
 })
--- a/ejercicio4/index.html
+++ b/ejercicio4/index.html
@@ -8,9 +8,7 @@
    </head>
    <body>
        <h1>Ejercicio 4</h1>
-         <button id="botonRestar" disabled="true">Restar (-)</button> <!-- desabilitamos el botonRestar de entrada, ya que empezamos en 0 -->
+
        <button id="botonSumar">Sumar (+)</button>        
        <p>contador: <span id="numero">0</span></p>
        <script src="ejercicio4.js"></script>
    </body>
 </html>
--- a/ejercicio5/ejercicio5.js
+++ b/ejercicio5/ejercicio5.js
@@ -1,50 +1 @@
 // Agregar aquí el código javascript
 // Dado un array de países (al menos diez), construir dinámicamente una lista en
 // la página con todos ellos. Es decir: la lista de países no debe estar en el
 // archivo html, sino como array en javascript, y a partir de este array se debe
 // generar la lista.
 // Agregar un campo de texto arriba de la lista para búsqueda. A
 // medida que el usuario escribe, mostrar solo los países cuyo nombre contenga el
 // texto ingresado (sin distinguir mayúsculas de minúsculas). Si el campo está
 // vacío, mostrar todos.
 // En ningún momento debemos modificar el array original, sino ir reconstruyendo
 // la lista en el DOM con cada cambio del campo de búsqueda.
 //  CREACION DE LA LISTA
 //creamos las siguientes variables
 let arrayPaises = ["Venezuela", "Jamaica", "Dinamarca", "Mongolia", "Singapur", "Vietnam", "Letonia", "Escocia", "Congo", "Argelia"] ; // array con los paises
 let arrayPaisesMinusculas = arrayPaises.map(pais=>pais.toLowerCase()) //pasamos la lista a minusculas para evitar incompatibilidades
 let ulPaises = document.createElement("ul"); // cramos la UL (hasta ahora sin items)
 let input = document.createElement("input"); //creamos el input
 let body = document.querySelector("body");  // asignamos a esta variable la etiqueta "body"
 body.appendChild(input); // incorporamos el input al body
 body.appendChild(ulPaises); // lo mismo con la UL vacia
 //IMPORTANTE: este for se ececutara una sola vez al cargar la pagina para crear la lista
 for (let pais of arrayPaises){ // recorremos los 10 paises originales con un "for"
    let liPais = document.createElement("li") //creamos el li
    liPais.textContent = pais // lo llenamos con el pais iterado de la lista
    ulPaises.appendChild(liPais) // y lo anexamos a la UL
 }
 input.addEventListener("keyup", () => { //creamos el listener que va a activase con cada "keyup" dentro del input
    ulPaises.innerHTML = ""; // lo primero que hace el listener es borrar la lista para que no se repitan los elementos que queremos agregar
    let busqueda = input.value.trim().toLocaleLowerCase() //texto ingresado en el input sin espacios y convertido a minusculas
    let arrayPaisesMin = arrayPaises.map(p => p.toLocaleLowerCase()) // convertimos la lista de paises en minusculas
    let arrayPaisesBusqueda = arrayPaisesMin.filter(pais => pais.includes(busqueda)); // almacenamos en variable los strings del array que coincidan con la busqueda
    for (let p of arrayPaisesBusqueda){ // iteramos las lista que contiene solamente los paises que coinciden con el input
        let liPais = document.createElement("li"); //creamos el li
        liPais.textContent = p.charAt(0).toUpperCase() + p.slice(1) ; // lo rellenamos con el pais iterado de la lista ya capitalizado 
        // (aclaracion: la siguiente linea de codigo "charAt(0).toUpperCase() + p.slice(1)" es una forma de capitalizar la palabra, equivalente al metodo capitalize() que se encuentra en python)
        ulPaises.appendChild(liPais) // lo anexamos
    }
 })
--- a/ejercicio6/ejercicio6.js
+++ b/ejercicio6/ejercicio6.js
@@ -1,86 +1 @@
-// // Agregar aquí el código javascript
+// Agregar aquí el código javascript
 // Construir dinámicamente una tabla HTML con una fila por empleado. Agregar una
 // fila al final que muestre el sueldo promedio del total de empleados.
 const empleados = [
    { nombre: "Ana", sector: "Desarrollo", sueldo: 150000 },
    { nombre: "Luis", sector: "Diseño", sueldo: 120000 },
    { nombre: "Marta", sector: "Desarrollo", sueldo: 160000 },
    { nombre: "Carlos", sector: "RRHH", sueldo: 110000 },
    { nombre: "Julia", sector: "Diseño", sueldo: 130000 }
 ];
 // PROMEDIO DE SUELDOS
 let arraySueldoEmpleados = empleados.map((empleado) => empleado.sueldo); // creamos un array que solamente contenga los sueldos
 let sumatoriaSueldos = arraySueldoEmpleados.reduce((acumulador, numeroActual) => acumulador + numeroActual, 0); // tomamos la lista creada y aplicamos el metodo reduce para sumar todos sus elementos. similar al metodo sum() de python
 let promedioSueldos = sumatoriaSueldos / empleados.length // dividimos las sumatoria de los sueldos por las cantidad de empleados
 //IMPORTANTE: la variable promedioSueldos sera usada mas tarde al final de la tabla
 // TABLA DINAMICA: este ejercicio lo separ`e en dos partes, DINAMICA y NO DINAMICA. 
 // Empezamos por la parte NO DINAMICA: (parte de la tabla que no deberia a camibiar, aunque ingresen mas empleados)
 //creamos/asignamos los elementos necesarios
 let body =  document.querySelector('body');
 tabla = document.createElement('table');
 tableHead = document.createElement('thead'); 
 tableRowHeader = document.createElement('tr');
 thc1 = document.createElement('th');  // thc: abreviatura de TableHeaderCell
 thc2 = document.createElement('th');
 thc3 = document.createElement('th');
 thc4 = document.createElement('th');
 tableBody = document.createElement('tbody');
 // aplicamos el textContent a los elementos 
 thc1.textContent = 'Nombre';
 thc2.textContent = 'Sector';
 thc3.textContent = 'Sueldo';
 thc4.textContent = 'Promedio';
 // asignamos a la tabla los elementos
 body.appendChild(tabla);
 tabla.appendChild(tableHead);
 tableHead.appendChild(tableRowHeader);
 tableRowHeader.appendChild(thc1);
 tableRowHeader.appendChild(thc2);
 tableRowHeader.appendChild(thc3);
 tableRowHeader.appendChild(thc4);
 tabla.appendChild(tableBody);
 // Ahora vamos por la parte DINAMICA:
 for (let empleado of empleados){ // iteramos la lista 
    //Creamos una row y tres 'td' por empleado, para nombre, sector y sueldo
    RowEmpleado = document.createElement('tr');
    nombreEmpleado = document.createElement('td');
    sectorEmpleado = document.createElement('td');
    sueldoEmpleado = document.createElement('td');
    //Llenamos las 'td' con su respectivo texto acceciendo al objeto iterado
    nombreEmpleado.textContent = empleado.nombre;
    sectorEmpleado.textContent = empleado.sector;
    sueldoEmpleado.textContent = empleado.sueldo;
    //Anexamos los elementos 'row' y 'td'
    tableBody.appendChild(RowEmpleado);
    RowEmpleado.appendChild(nombreEmpleado);
    RowEmpleado.appendChild(sectorEmpleado);
    RowEmpleado.appendChild(sueldoEmpleado);
 };
 // Creamos la fila para el promedio y la anexamos a tablebody
 rowPromedio = document.createElement('tr');
 tableBody.appendChild(rowPromedio);
 // Creamos los td (pero solo vamos a llenar el ultimo)
 td1 = document.createElement('td');
 td2 = document.createElement('td');
 td3 = document.createElement('td');
 tdPromedio = document.createElement('td');
 // Llenamos el 'td'
 tdPromedio.textContent = promedioSueldos;
 // anecamos los 'td'
 rowPromedio.appendChild(td1);
 rowPromedio.appendChild(td2);
 rowPromedio.appendChild(td3);
 rowPromedio.appendChild(tdPromedio);
--- a/ejercicio7/ejercicio7.js
+++ b/ejercicio7/ejercicio7.js
@@ -1,50 +1 @@
 // Agregar aquí el código javascript
 // ## Ejercicio 7: Formulario con validación
 // Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo,
 // validar:
 // - Que ningún campo esté vacío.
 // - Que la edad contenga números enteros entre 0 y 100.
 // - Que la contraseña tenga al menos 8 caracteres.
 // Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido,
 // ocultar los errores y mostrar un mensaje de éxito.
 //creamos las variables
 let formulario = document.querySelector('form');
 let inputNombre = document.querySelector('#input-nombre');
 let inputEdad = document.querySelector('#input-edad');
 let inputPassword = document.querySelector('#input-password');
 let mensajeErrorNombre = document.querySelector('#nombre-error');
 let mensajeErrorEdad = document.querySelector('#edad-error');
 let mensajeErrorPassword = document.querySelector('#password-error');
 //creamos el listener que se activara al enviar el form
 formulario.addEventListener('submit' ,(e)=>{
    e.preventDefault();
    // una vez activado el listener empezamos a validar los valores recibidos
    if(inputNombre.value === ''){   //si el nombre esta vacio, llenamos el mensaje de error
        mensajeErrorNombre.textContent = 'Ingresa tu nombre'
    } else {mensajeErrorNombre.textContent = ''} // Si el nombre NO esta vacio, borramos el mensaje de error
    if(inputEdad.value === ''){
        mensajeErrorEdad.textContent = 'Ingresa tu edad'
    } else if(inputEdad.value < 0 || inputEdad.value > 100 ){ // si es menor a 0 o mayor a 100 llenamos el mensaje de error
        mensajeErrorEdad.textContent = 'Edad fuera de limites'
    } else {mensajeErrorEdad.textContent = ''} // si nunguno de los errores surge, vaciamos el mensaje de error
    if(inputPassword.value === ''){
        mensajeErrorPassword.textContent = 'Ingrese la password'
    } else if (inputPassword.value.length < 8){     // si tiene menos de 8 caracteres llenamos el mensaje de error
        mensajeErrorPassword.textContent =  'Password corta'
    }
        else {mensajeErrorPassword.textContent = ''}
    // Si los 3 mensajes de error estan vacios, damos el formulario por valido (importante que esta condicion este en el final del listener)    
    if (mensajeErrorNombre.textContent == '' && mensajeErrorEdad.textContent == '' && mensajeErrorPassword.textContent == ''){
        alert('Formulario enviado con exito'); // informamos el envio del formulario
        inputNombre.value = ''; // y vaciamos los inputs
        inputEdad.value = '';
        inputPassword.value = '';
    }
 })
--- a/ejercicio7/index.html
+++ b/ejercicio7/index.html
@@ -8,21 +8,7 @@
    </head>
    <body>
        <h1>Ejercicio 7</h1>
-        <form action="">
+
            <label for="input-nombre">Nombre</label>
            <input type="text" name="input-nombre" id="input-nombre">
            <label for="input-nombre" id="nombre-error" style="color: rgba(238, 21, 21, 0.971);"></label>
            <br>
            <label for="input-edad">Edad</label>
            <input type="number" name="input-edad" id="input-edad">
            <label for="input-edad" id="edad-error" style="color: rgba(238, 21, 21, 0.971);"></label>
            <br>
            <label for="input-password">Password</label>
            <input type="password" name="input-password" id="input-password">
            <label for="input-password" id="password-error" style="color: rgba(238, 21, 21, 0.971);"></label>
            <br>
            <input type="submit" value="Enviar">
        </form>
        <script src="ejercicio7.js"></script>
    </body>
 </html>
--- a/ejercicio8/ejercicio8.js
+++ b/ejercicio8/ejercicio8.js
@@ -1,36 +1 @@
 // Agregar aquí el código javascript
 // Construir dinámicamente una lista de productos en la página, donde cada ítem
 // tenga un botón "Agregar al carrito". Al hacer clic, el producto se agrega a
 // una sección "Carrito" visible en la página, junto con su precio. Al pie del
 // carrito, mostrar el total actualizado.
 // Si el mismo producto se agrega más de una vez, no duplicarlo: incrementar su
 // cantidad y actualizar el total.
 // Lista de prodcutos
 let ArrayProductos = ['arroz', 'aceite', 'fideos', 'azucar', 'avena'];
 // asignamos las variables NO dinamicas y anexamos al body
 let body = document.querySelector('body');
 let listaProductos = document.createElement('ul');
 body.appendChild(listaProductos);
 // Creamos la lista dinamica recorriendo el array con los productos
 for (producto of ArrayProductos){
    let liProducto = document.createElement('li');
    liProducto.innerHTML = `<li> ${producto} <button type="button" id='boton-carrito'>+</button></li>`;
    listaProductos.appendChild(liProducto);
 }
 // creamos un listener en la 'ul' que solo muestra console.log si se toca el boton (esta logica nos servira mas adelante)
 listaProductos.addEventListener('click', (e) => {
    if (e.target.id === 'boton-carrito'){
        console.log('el boton + fue clickeado')
    }
 })
 // obervaciones para el siguiente commit: no fue la mejor decicion hacer un array en simple 
 // en arrayProductos, ya que cada producto debe tener un precio asociado. 
 // se debe modificar arrayProductos y hacerla 
 // un array de objetos con las propiedades 'nombre' y 'precio'
--- a/ejercicio8/index.html
+++ b/ejercicio8/index.html
@@ -8,7 +8,7 @@
    </head>
    <body>
        <h1>Ejercicio 8</h1>
-<button></button>
+
        <script src="ejercicio8.js"></script>
    </body>
 </html>
--- a/ejercicio9/ejercicio9.js
+++ b/ejercicio9/ejercicio9.js
@@ -1 +1,133 @@
-// Agregar aquí el código javascript
+const preguntas = [
  {
    pregunta: "¿Cuál es la diferencia entre let y const?",
    opciones: [
      "No hay diferencia, son equivalentes",
      "let permite reasignar el valor, const no",
      "Depende del tipo de datos",
      "let solo funciona dentro de funciones"
    ],
    correcta: 1
  },
  {
    pregunta: "¿Qué retorna querySelector si no encuentra ningún elemento?",
    opciones: ["undefined", "false", "null", "0"],
    correcta: 2
  },
  {
    pregunta: "¿Qué hace el método filter?",
    opciones: [
      "Modifica los elementos del array original",
      "Retorna el primer elemento que cumple la condición",
      "Retorna un nuevo array con los elementos que cumplen la condición",
      "Elimina elementos duplicados del array"
    ],
    correcta: 2
  },
  {
    pregunta: "¿Cuál es el operador de igualdad estricta en JavaScript?",
    opciones: ["=", "==", "===", "!="],
    correcta: 2
  },
  {
    pregunta: "¿Para qué sirve event.preventDefault()?",
    opciones: [
      "Detiene la propagación del evento hacia elementos padre",
      "Evita el comportamiento por defecto del navegador",
      "Elimina el event listener del elemento",
      "Pausa la ejecución del código hasta que el evento termine"
    ],
    correcta: 1
  }
 ];
 let indiceActual = 0;
 let puntaje = 0;
 const pantalla      = document.querySelector("#pantalla-quiz");
 const resultadoEl   = document.querySelector("#resultado");
 const preguntaEl    = document.querySelector("#pregunta");
 const opcionesEl    = document.querySelector("#opciones");
 const feedbackEl    = document.querySelector("#feedback");
 const btnSiguiente  = document.querySelector("#siguiente");
 const progresoEl    = document.querySelector("#progreso");
 const progressFill  = document.querySelector("#progress-fill");
 const puntajeNumEl  = document.querySelector("#puntaje-num");
 const resultadoMsg  = document.querySelector("#resultado-msg");
 const btnReiniciar  = document.querySelector("#reiniciar");
 function mensajeFinal(p, total) {
  if (p === total) return "¡Perfecto! Todo bien.";
  if (p >= total * 0.8) return "¡Muy bien!";
  if (p >= total * 0.6) return "Bien, pero hay margen para mejorar.";
  return "Vale la pena repasar los temas.";
 }
 function mostrarPregunta() {
  const actual = preguntas[indiceActual];
  // Actualizamos el encabezado y la barra de progreso.
  progresoEl.textContent = `${indiceActual + 1} / ${preguntas.length}`;
  progressFill.style.width = `${(indiceActual / preguntas.length) * 100}%`;
  preguntaEl.textContent = actual.pregunta;
  opcionesEl.innerHTML = "";
  feedbackEl.textContent = "";
  btnSiguiente.style.display = "none";
  for (let i = 0; i < actual.opciones.length; i++) {
    const boton = document.createElement("button");
    boton.className = "opcion";
    boton.textContent = actual.opciones[i];
    boton.addEventListener("click", () => responder(i));
    opcionesEl.appendChild(boton);
  }
 }
 function responder(indiceRespuesta) {
  const actual  = preguntas[indiceActual];
  const botones = opcionesEl.querySelectorAll(".opcion");
  // Deshabilitamos todos los botones para que no se pueda responder dos veces.
  for (const boton of botones) {
    boton.disabled = true;
  }
  if (indiceRespuesta === actual.correcta) {
    botones[indiceRespuesta].classList.add("correcta");
    feedbackEl.textContent = "¡Correcto!";
    puntaje++;
  } else {
    botones[indiceRespuesta].classList.add("incorrecta");
    botones[actual.correcta].classList.add("correcta");
    feedbackEl.textContent = `Incorrecto. La correcta era: "${actual.opciones[actual.correcta]}"`;
  }
  btnSiguiente.style.display = "inline-block";
 }
 btnSiguiente.addEventListener("click", () => {
  indiceActual++;
  if (indiceActual < preguntas.length) {
    mostrarPregunta();
  } else {
    // Actualizamos la barra al 100% antes de mostrar el resultado.
    progressFill.style.width = "100%";
    pantalla.style.display    = "none";
    resultadoEl.style.display = "block";
    puntajeNumEl.textContent  = `${puntaje} / ${preguntas.length}`;
    resultadoMsg.textContent  = mensajeFinal(puntaje, preguntas.length);
  }
 });
 btnReiniciar.addEventListener("click", () => {
  indiceActual = 0;
  puntaje      = 0;
  resultadoEl.style.display = "none";
  pantalla.style.display    = "block";
  mostrarPregunta();
 });
 mostrarPregunta();
--- a/ejercicio9/estilo.css
+++ b/ejercicio9/estilo.css
@@ -1,2 +1,168 @@
-/* Agregar el código CSS necesario para el ejercicio */
+/* Hoja de estilo realizada con IA */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 body {
    font-family: system-ui, sans-serif;
    background: #f5f4f0;
    color: #1a1a1a;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
 }
 .card {
    background: #fff;
    border: 0.5px solid #ddd;
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 520px;
 }
 /* ── Encabezado ── */
 .quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
 }
 .quiz-title {
    font-size: 0.7rem;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
 }
 .quiz-progress {
    font-size: 0.75rem;
    color: #aaa;
 }
 /* ── Barra de progreso ── */
 .progress-bar {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    margin-bottom: 2rem;
    overflow: hidden;
 }
 .progress-fill {
    height: 100%;
    background: #1a1a1a;
    border-radius: 2px;
    transition: width 0.3s ease;
 }
 /* ── Pregunta ── */
 #pregunta {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    min-height: 3rem;
 }
 /* ── Opciones ── */
 #opciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.5rem;
 }
 .opcion {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: #f5f4f0;
    border: 0.5px solid #ddd;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1a1a1a;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
 }
 .opcion:hover:not(:disabled) {
    background: #edecea;
    border-color: #bbb;
 }
 .opcion:disabled { cursor: default; }
 .opcion.correcta {
    background: #eaf3de;
    border-color: #639922;
    color: #3b6d11;
 }
 .opcion.incorrecta {
    background: #fcebeb;
    border-color: #e24b4a;
    color: #a32d2d;
 }
 /* ── Feedback ── */
 #feedback {
    font-size: 0.8rem;
    min-height: 1.2rem;
    color: #555;
    margin-bottom: 1.25rem;
 }
 /* ── Botones de acción ── */
 .btn {
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: 0.5px solid #ccc;
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
 }
 .btn:hover { opacity: 0.85; }
 .btn-secondary {
    background: transparent;
    color: #1a1a1a;
 }
 /* ── Pantalla de resultado ── */
 #resultado {
    text-align: center;
    padding: 1rem 0;
 }
 .resultado-score {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.5rem;
 }
 .resultado-label {
    font-size: 0.875rem;
    color: #888;
    margin-bottom: 0.5rem;
 }
 .resultado-msg {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 2rem;
 }
--- a/ejercicio9/index.html
+++ b/ejercicio9/index.html
@@ -7,7 +7,36 @@
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
-        <h1>Ejercicio 9</h1>
+
        <div class="card">
            <div id="pantalla-quiz">
                <div class="quiz-header">
                    <span class="quiz-title">Ejercicio 9 - Quiz de JavaScript</span>
                    <span class="quiz-progress" id="progreso">1 / 5</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
                </div>
                <p id="pregunta"></p>
                <div id="opciones"></div>
                <p id="feedback"></p>
                <button class="btn" id="siguiente" style="display:none">Siguiente →</button>
            </div>
            <div id="resultado" style="display:none">
                <p class="resultado-score" id="puntaje-num"></p>
                <p class="resultado-label">respuestas correctas</p>
                <p class="resultado-msg" id="resultado-msg"></p>
                <button class="btn btn-secondary" id="reiniciar">Reiniciar quiz</button>
            </div>
        </div>
        <script src="ejercicio9.js"></script>
    </body>