Solución ejercicio 9

ejercicio8/ejercicio8.js

@@ -1,72 +1 @@
-const productos = [
-    { nombre: "Teclado", precio: 8500 },
-    { nombre: "Mouse", precio: 4200 },
-    { nombre: "Monitor", precio: 62000 },
-    { nombre: "Auriculares", precio: 11000 },
-    { nombre: "Webcam", precio: 15500 }
-];
-
-// El carrito es un array de objetos { nombre, precio, cantidad }, que
-// inicializamos vacío fuera de las funciones (para que sea global):
-const carrito = [];
-
-const listaProductos = document.querySelector("#productos");
-
-function actualizarCarrito() {
-    const totalParrafo = document.querySelector("#total");
-    const listaCarrito = document.querySelector("#carrito");
-    listaCarrito.innerHTML = "";
-
-    // Calculamos el total mientras construimos la lista.
-    let total = 0;
-
-    for (const item of carrito) {
-        const subtotal = item.precio * item.cantidad;
-        total += subtotal;
-
-        const li = document.createElement("li");
-        li.textContent = `${item.nombre} x${item.cantidad} — $${subtotal.toLocaleString()}`;
-        listaCarrito.appendChild(li);
-    }
-
-    totalParrafo.textContent = `Total: $${total.toLocaleString()}`;
-}
-
-function agregarAlCarrito(producto) {
-    // Buscamos si el producto ya está en el carrito.
-    const itemExistente = carrito.find(item => item.nombre === producto.nombre);
-
-    if (itemExistente) {
-        // Si ya existe, solo incrementamos la cantidad.
-        itemExistente.cantidad++;
-    } else {
-        // Si no existe, lo agregamos manualmente con cantidad 1,
-        // copiando las propiedades una por una.
-        carrito.push({
-            nombre: producto.nombre,
-            precio: producto.precio,
-            cantidad: 1
-        });
-    }
-
-    actualizarCarrito();
-}
-
-// Construimos la lista de productos con un botón por cada uno.
-for (const producto of productos) {
-  const listaProductos = document.querySelector("#productos");
-  const card = document.createElement("div");
-  card.className = "product-card";
-  card.innerHTML = `
-    <div>
-      <p class="product-name">${producto.nombre}</p>
-      <p class="product-price">$${producto.precio.toLocaleString()}</p>
-    </div>
-    <button class="btn-add">+ Agregar</button>
-  `;
-  card.querySelector(".btn-add").addEventListener("click", () => agregarAlCarrito(producto));
-  listaProductos.appendChild(card);
-}
-
-actualizarCarrito();
-
+// Agregar aquí el código javascript

ejercicio8/estilo.css

@@ -1,215 +1,2 @@
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  font-family: system-ui, sans-serif;
-  background: #f5f4f0;
-  color: #1a1a1a;
-  min-height: 100vh;
-  padding: 2rem;
-}
-
-h1 {
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: #555;
-  margin-bottom: 1.5rem;
-}
-
-.layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-  max-width: 820px;
-}
-
-.section-label {
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 0.75rem;
-}
-
-/* ── Productos ── */
-
-.product-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.product-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  background: #fff;
-  border: 0.5px solid #ddd;
-  border-radius: 8px;
-}
-
-.product-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #1a1a1a;
-}
-
-.product-price {
-  font-size: 0.75rem;
-  color: #888;
-  margin-top: 2px;
-}
-
-.btn-add {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  background: transparent;
-  border: 0.5px solid #ccc;
-  border-radius: 6px;
-  color: #1a1a1a;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.btn-add:hover { background: #f0efeb; }
-
-/* ── Carrito ── */
-
-.cart-panel {
-  background: #edecea;
-  border: 0.5px solid #ddd;
-  border-radius: 12px;
-  padding: 1rem 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.cart-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  background: #fde8e8;
-  color: #a32d2d;
-  border-radius: 9px;
-  font-size: 0.625rem;
-  font-weight: 500;
-  margin-left: 4px;
-}
-
-.cart-empty {
-  font-size: 0.8rem;
-  color: #aaa;
-  text-align: center;
-  padding: 1.5rem 0;
-}
-
-.cart-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.cart-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  background: #fff;
-  border: 0.5px solid #ddd;
-  border-radius: 8px;
-}
-
-.cart-item-name {
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: #1a1a1a;
-}
-
-.cart-item-sub {
-  font-size: 0.7rem;
-  color: #888;
-  margin-top: 2px;
-}
-
-.cart-item-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.cart-item-total {
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: #1a1a1a;
-  min-width: 64px;
-  text-align: right;
-}
-
-.qty-controls {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.qty-btn {
-  width: 22px;
-  height: 22px;
-  border: 0.5px solid #ccc;
-  border-radius: 4px;
-  background: transparent;
-  color: #1a1a1a;
-  cursor: pointer;
-  font-size: 0.875rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
-.qty-btn:hover { background: #f0efeb; }
-
-.qty-val {
-  font-size: 0.8rem;
-  font-weight: 500;
-  min-width: 16px;
-  text-align: center;
-  color: #1a1a1a;
-}
-
-.divider {
-  border: none;
-  border-top: 0.5px solid #ccc;
-}
-
-.cart-total {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-}
-
-.cart-total-label {
-  font-size: 0.8rem;
-  color: #888;
-}
-
-.cart-total-amount {
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: #1a1a1a;
-}
+/* Agregar el código CSS necesario para el ejercicio */
 

ejercicio8/index.html

@@ -1,39 +1,14 @@
 <!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Ejercicio 8 — Carrito de compras</title>
-  <style></style>
-  <link rel="stylesheet" href="estilo.css">
-</head>
-<body>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio 8</title>
+        <link rel="stylesheet" href="estilo.css">
+    </head>
+    <body>
+        <h1>Ejercicio 8</h1>
 
-  <h1>Ejercicio 8 — Carrito de compras</h1>
-
-  <div class="layout">
-    <div>
-      <p class="section-label">Productos</p>
-      <div class="product-list" id="productos"></div>
-    </div>
-
-    <div class="cart-panel">
-      <div class="cart-header">
-        <p class="section-label" style="margin:0">
-          Carrito
-        </p>
-      </div>
-      <div class="cart-items" id="carrito">
-        <p class="cart-empty" id="empty-msg">El carrito está vacío.</p>
-      </div>
-      <hr class="divider">
-      <div class="cart-total">
-        <span class="cart-total-label">Total</span>
-        <span class="cart-total-amount" id="total">$0</span>
-      </div>
-    </div>
-  </div>
-
-  <script src="ejercicio8.js"></script>
-</body>
+        <script src="ejercicio8.js"></script>
+    </body>
 </html>

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();

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;
+}

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>