ejercicio 9: quiz de opcion multiple

ejercicio 8: carrito de compras
ejercicio 6: tabla dinamica de empleados
2026-05-28 14:00:44 -03:00 · 2026-05-28 13:56:45 -03:00 · 2026-05-28 13:46:22 -03:00 · 2026-05-28 13:40:59 -03:00 · 2026-05-28 13:33:50 -03:00 · 2026-05-28 13:27:31 -03:00
23 changed files with 568 additions and 316 deletions
--- a/ejercicio1/ejercicio1.js
+++ b/ejercicio1/ejercicio1.js
@@ -1 +1,13 @@
-// Agregar aquí el código javascript
+const nombreInput = document.getElementById('nombre');
+const saludarBtn = document.getElementById('saludar');
+const mensajeP = document.getElementById('mensaje');
+
+saludarBtn.addEventListener('click', () => {
+    const nombre = nombreInput.value.trim();
+
+    if (nombre === '') {
+        mensajeP.textContent = 'Por favor, ingresá tu nombre.';
+    } else {
+        mensajeP.textContent = `Hola, ${nombre}!`;
+    }
+});
--- a/ejercicio1/index.html
+++ b/ejercicio1/index.html
@@ -2,13 +2,19 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 1</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 1</h1>

+        <label for="nombre">Ingresa tu nombre:</label>
+        <input id="nombre" type="text" placeholder="Tu nombre">
+        <button id="saludar">Saludar</button>
+
+        <p id="mensaje"></p>
+
        <script src="ejercicio1.js"></script>
    </body>
 </html>
--- a/ejercicio2/ejercicio2.js
+++ b/ejercicio2/ejercicio2.js
@@ -1 +1,16 @@
-// Agregar aquí el código javascript
+const tareaInput = document.getElementById('tarea');
+const agregarBtn = document.getElementById('agregar');
+const listaTareas = document.getElementById('lista-tareas');
+
+agregarBtn.addEventListener('click', () => {
+    const tarea = tareaInput.value.trim();
+
+    if (tarea === '') {
+        return;
+    }
+
+    const li = document.createElement('li');
+    li.textContent = tarea;
+    listaTareas.appendChild(li);
+    tareaInput.value = '';
+});
--- a/ejercicio2/index.html
+++ b/ejercicio2/index.html
@@ -2,13 +2,19 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 2</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 2</h1>

+        <label for="tarea">Nueva tarea:</label>
+        <input id="tarea" type="text" placeholder="Escribí una tarea">
+        <button id="agregar">Agregar</button>
+
+        <ul id="lista-tareas"></ul>
+
        <script src="ejercicio2.js"></script>
    </body>
 </html>
--- a/ejercicio3/ejercicio3.js
+++ b/ejercicio3/ejercicio3.js
@@ -1 +1,11 @@
-// Agregar aquí el código javascript
+const listaItems = document.getElementById('lista-items');
+
+listaItems.addEventListener('click', (event) => {
+    const item = event.target;
+
+    if (item.tagName.toLowerCase() !== 'li') {
+        return;
+    }
+
+    item.classList.toggle('seleccionado');
+});
--- a/ejercicio3/estilo.css
+++ b/ejercicio3/estilo.css
@@ -1,2 +1,7 @@
 /* Agregar el código CSS necesario para el ejercicio */

+.seleccionado {
+    background-color: yellow;
+    font-weight: bold;
+}
+
--- a/ejercicio3/index.html
+++ b/ejercicio3/index.html
@@ -2,13 +2,22 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 3</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 3</h1>

+        <ul id="lista-items">
+            <li>Zapatos nuevos</li>
+            <li>Leer un capítulo</li>
+            <li>Comprar frutas</li>
+            <li>Enviar el informe</li>
+            <li>Escuchar música</li>
+            <li>Practicar JavaScript</li>
+        </ul>
+
        <script src="ejercicio3.js"></script>
    </body>
 </html>
--- a/ejercicio4/ejercicio4.js
+++ b/ejercicio4/ejercicio4.js
@@ -1 +1,29 @@
-// Agregar aquí el código javascript
+const restarBtn = document.getElementById('restar');
+const sumarBtn = document.getElementById('sumar');
+const valorSpan = document.getElementById('valor');
+
+let contador = 0;
+const LIMITE_MIN = 0;
+const LIMITE_MAX = 10;
+
+function actualizarEstado() {
+    valorSpan.textContent = contador;
+    restarBtn.disabled = contador <= LIMITE_MIN;
+    sumarBtn.disabled = contador >= LIMITE_MAX;
+}
+
+restarBtn.addEventListener('click', () => {
+    if (contador > LIMITE_MIN) {
+        contador -= 1;
+        actualizarEstado();
+    }
+});
+
+sumarBtn.addEventListener('click', () => {
+    if (contador < LIMITE_MAX) {
+        contador += 1;
+        actualizarEstado();
+    }
+});
+
+actualizarEstado();
--- a/ejercicio4/index.html
+++ b/ejercicio4/index.html
@@ -2,13 +2,17 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 4</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 4</h1>

+        <button id="restar">Restar</button>
+        <button id="sumar">Sumar</button>
+        <p>Contador: <span id="valor">0</span></p>
+
        <script src="ejercicio4.js"></script>
    </body>
 </html>
--- a/ejercicio5/ejercicio5.js
+++ b/ejercicio5/ejercicio5.js
@@ -1 +1,43 @@
-// Agregar aquí el código javascript
+const paises = [
+    'Argentina',
+    'Brasil',
+    'Canadá',
+    'Dinamarca',
+    'España',
+    'Filipinas',
+    'Grecia',
+    'Hungría',
+    'India',
+    'Japón',
+    'México',
+    'Noruega'
+];
+
+const filtroInput = document.getElementById('filtro');
+const listaPaises = document.getElementById('lista-paises');
+
+function renderizarLista(items) {
+    listaPaises.innerHTML = '';
+
+    items.forEach((pais) => {
+        const li = document.createElement('li');
+        li.textContent = pais;
+        listaPaises.appendChild(li);
+    });
+}
+
+function filtrarPaises(texto) {
+    const valor = texto.trim().toLowerCase();
+    if (valor === '') {
+        return paises;
+    }
+
+    return paises.filter((pais) => pais.toLowerCase().includes(valor));
+}
+
+filtroInput.addEventListener('input', (event) => {
+    const paisesFiltrados = filtrarPaises(event.target.value);
+    renderizarLista(paisesFiltrados);
+});
+
+renderizarLista(paises);
--- a/ejercicio5/estilo.css
+++ b/ejercicio5/estilo.css
@@ -1,2 +1,28 @@
 /* Agregar el código CSS necesario para el ejercicio */

+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+label,
+input {
+    display: block;
+    margin-bottom: 10px;
+}
+
+input {
+    padding: 8px;
+    max-width: 300px;
+}
+
+ul {
+    list-style: disc inside;
+    padding-left: 0;
+    max-width: 320px;
+}
+
+li {
+    margin-bottom: 5px;
+}
+
--- a/ejercicio5/index.html
+++ b/ejercicio5/index.html
@@ -2,13 +2,18 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 5</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 5</h1>

+        <label for="filtro">Buscar país:</label>
+        <input id="filtro" type="text" placeholder="Escribí para filtrar">
+
+        <ul id="lista-paises"></ul>
+
        <script src="ejercicio5.js"></script>
    </body>
 </html>
--- a/ejercicio6/ejercicio6.js
+++ b/ejercicio6/ejercicio6.js
@@ -1 +1,50 @@
-// Agregar aquí el código javascript
+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 }
+];
+
+const tablaEmpleados = document.getElementById('tabla-empleados');
+const cuerpoTabla = tablaEmpleados.querySelector('tbody');
+const pieTabla = tablaEmpleados.querySelector('tfoot');
+
+function formatearSueldo(valor) {
+    return `$${valor.toLocaleString('es-AR')}`;
+}
+
+function renderizarTabla() {
+    cuerpoTabla.innerHTML = '';
+    let totalSueldo = 0;
+
+    empleados.forEach((empleado) => {
+        const fila = document.createElement('tr');
+
+        const celdaNombre = document.createElement('td');
+        celdaNombre.textContent = empleado.nombre;
+
+        const celdaSector = document.createElement('td');
+        celdaSector.textContent = empleado.sector;
+
+        const celdaSueldo = document.createElement('td');
+        celdaSueldo.textContent = formatearSueldo(empleado.sueldo);
+
+        fila.appendChild(celdaNombre);
+        fila.appendChild(celdaSector);
+        fila.appendChild(celdaSueldo);
+        cuerpoTabla.appendChild(fila);
+
+        totalSueldo += empleado.sueldo;
+    });
+
+    const promedio = Math.round(totalSueldo / empleados.length);
+    pieTabla.innerHTML = `
+        <tr>
+            <td colspan="2"><strong>Sueldo promedio</strong></td>
+            <td><strong>${formatearSueldo(promedio)}</strong></td>
+        </tr>
+    `;
+}
+
+renderizarTabla();
--- a/ejercicio6/estilo.css
+++ b/ejercicio6/estilo.css
@@ -1,2 +1,28 @@
 /* Agregar el código CSS necesario para el ejercicio */

+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 600px;
+}
+
+th,
+td {
+    border: 1px solid #ccc;
+    padding: 8px 12px;
+    text-align: left;
+}
+
+th {
+    background-color: #f4f4f4;
+}
+
+tfoot td {
+    background-color: #fafafa;
+}
+
--- a/ejercicio6/index.html
+++ b/ejercicio6/index.html
@@ -2,13 +2,25 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 6</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 6</h1>

+        <table id="tabla-empleados">
+            <thead>
+                <tr>
+                    <th>Nombre</th>
+                    <th>Sector</th>
+                    <th>Sueldo</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+            <tfoot></tfoot>
+        </table>
+
        <script src="ejercicio6.js"></script>
    </body>
 </html>
--- a/ejercicio7/ejercicio7.js
+++ b/ejercicio7/ejercicio7.js
@@ -1 +1,61 @@
-// Agregar aquí el código javascript
+const formulario = document.getElementById('formulario');
+const nombreInput = document.getElementById('nombre');
+const edadInput = document.getElementById('edad');
+const contrasenaInput = document.getElementById('contrasena');
+
+const errorNombre = document.getElementById('error-nombre');
+const errorEdad = document.getElementById('error-edad');
+const errorContrasena = document.getElementById('error-contrasena');
+const mensajeExito = document.getElementById('mensaje-exito');
+
+function limpiarErrores() {
+    errorNombre.textContent = '';
+    errorEdad.textContent = '';
+    errorContrasena.textContent = '';
+    mensajeExito.textContent = '';
+}
+
+function validarFormulario() {
+    limpiarErrores();
+
+    let esValido = true;
+    const nombre = nombreInput.value.trim();
+    const edad = edadInput.value.trim();
+    const contrasena = contrasenaInput.value;
+
+    if (nombre === '') {
+        errorNombre.textContent = 'El nombre no puede quedar vacío.';
+        esValido = false;
+    }
+
+    if (edad === '') {
+        errorEdad.textContent = 'La edad no puede quedar vacía.';
+        esValido = false;
+    } else {
+        const edadNumero = Number(edad);
+        if (!Number.isInteger(edadNumero) || edadNumero < 0 || edadNumero > 100) {
+            errorEdad.textContent = 'La edad debe ser un número entero entre 0 y 100.';
+            esValido = false;
+        }
+    }
+
+    if (contrasena === '') {
+        errorContrasena.textContent = 'La contraseña no puede quedar vacía.';
+        esValido = false;
+    } else if (contrasena.length < 8) {
+        errorContrasena.textContent = 'La contraseña debe tener al menos 8 caracteres.';
+        esValido = false;
+    }
+
+    return esValido;
+}
+
+formulario.addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    if (validarFormulario()) {
+        mensajeExito.textContent = 'Formulario enviado correctamente.';
+    } else {
+        mensajeExito.textContent = '';
+    }
+});
--- a/ejercicio7/estilo.css
+++ b/ejercicio7/estilo.css
@@ -1,2 +1,42 @@
 /* Agregar el código CSS necesario para el ejercicio */

+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+.campo {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 4px;
+}
+
+input {
+    display: block;
+    width: 100%;
+    max-width: 320px;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+button {
+    padding: 10px 16px;
+    cursor: pointer;
+}
+
+.error {
+    display: block;
+    margin-top: 4px;
+    color: #c0392b;
+    font-size: 0.95rem;
+}
+
+.exito {
+    margin-top: 16px;
+    color: #2d7a2d;
+    font-weight: bold;
+}
+
--- a/ejercicio7/index.html
+++ b/ejercicio7/index.html
@@ -2,13 +2,37 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio 7</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <h1>Ejercicio 7</h1>

+        <form id="formulario">
+            <div class="campo">
+                <label for="nombre">Nombre:</label>
+                <input id="nombre" name="nombre" type="text">
+                <span class="error" id="error-nombre"></span>
+            </div>
+
+            <div class="campo">
+                <label for="edad">Edad:</label>
+                <input id="edad" name="edad" type="number" min="0" max="100">
+                <span class="error" id="error-edad"></span>
+            </div>
+
+            <div class="campo">
+                <label for="contrasena">Contraseña:</label>
+                <input id="contrasena" name="contrasena" type="password">
+                <span class="error" id="error-contrasena"></span>
+            </div>
+
+            <button type="submit">Enviar</button>
+        </form>
+
+        <p id="mensaje-exito" class="exito" aria-live="polite"></p>
+
        <script src="ejercicio7.js"></script>
    </body>
 </html>
--- a/ejercicio8/ejercicio8.js
+++ b/ejercicio8/ejercicio8.js
@@ -1,72 +1,71 @@
 const productos = [
-    { nombre: "Teclado", precio: 8500 },
-    { nombre: "Mouse", precio: 4200 },
-    { nombre: "Monitor", precio: 62000 },
-    { nombre: "Auriculares", precio: 11000 },
-    { nombre: "Webcam", precio: 15500 }
+  { 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 contenedorProductos = document.querySelector("#productos");
+const carritoLista = document.querySelector("#carrito");
+const totalTexto = document.querySelector("#total");
+
 const carrito = [];

-const listaProductos = document.querySelector("#productos");
+function mostrarProductos() {
+  for (const producto of productos) {
+    const div = document.createElement("div");

-function actualizarCarrito() {
-    const totalParrafo = document.querySelector("#total");
-    const listaCarrito = document.querySelector("#carrito");
-    listaCarrito.innerHTML = "";
+    div.innerHTML = `
+      <span>${producto.nombre} - $${producto.precio}</span>
+      <button>Agregar al carrito</button>
+    `;

-    // Calculamos el total mientras construimos la lista.
-    let total = 0;
+    const boton = div.querySelector("button");

-    for (const item of carrito) {
-        const subtotal = item.precio * item.cantidad;
-        total += subtotal;
+    boton.addEventListener("click", () => {
+      agregarAlCarrito(producto);
+    });

-        const li = document.createElement("li");
-        li.textContent = `${item.nombre} x${item.cantidad} — $${subtotal.toLocaleString()}`;
-        listaCarrito.appendChild(li);
-    }
-
-    totalParrafo.textContent = `Total: $${total.toLocaleString()}`;
+    contenedorProductos.appendChild(div);
+  }
 }

 function agregarAlCarrito(producto) {
-    // Buscamos si el producto ya está en el carrito.
-    const itemExistente = carrito.find(item => item.nombre === producto.nombre);
+  const existente = 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
-        });
-    }
+  if (existente) {
+    existente.cantidad++;
+  } else {
+    carrito.push({
+      nombre: producto.nombre,
+      precio: producto.precio,
+      cantidad: 1
+    });
+  }

-    actualizarCarrito();
+  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);
+function actualizarCarrito() {
+  carritoLista.innerHTML = "";
+
+  let total = 0;
+
+  for (const item of carrito) {
+    const li = document.createElement("li");
+
+    li.textContent =
+      `${item.nombre} x${item.cantidad} - $${item.precio * item.cantidad}`;
+
+    carritoLista.appendChild(li);
+
+    total += item.precio * item.cantidad;
+  }
+
+  totalTexto.textContent = `Total: $${total}`;
 }

-actualizarCarrito();
-
+mostrarProductos();
--- a/ejercicio8/estilo.css
+++ b/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 */

--- a/ejercicio8/index.html
+++ b/ejercicio8/index.html
@@ -1,39 +1,22 @@
 <!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>Productos</h1>

-  <h1>Ejercicio 8 — Carrito de compras</h1>
+<div id="productos"></div>

-  <div class="layout">
-    <div>
-      <p class="section-label">Productos</p>
-      <div class="product-list" id="productos"></div>
-    </div>
+<h2>Carrito</h2>

-    <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>
+<ul id="carrito"></ul>

-  <script src="ejercicio8.js"></script>
-</body>
+<p id="total">Total: $0</p>
+        <script src="ejercicio8.js"></script>
+    </body>
 </html>
--- a/ejercicio9/ejercicio9.js
+++ b/ejercicio9/ejercicio9.js
@@ -1 +1,99 @@
-// Agregar aquí el código javascript
+const preguntas = [
+  {
+    pregunta: "¿Capital de Francia?",
+    opciones: ["Madrid", "París", "Roma", "Berlín"],
+    correcta: 1
+  },
+  {
+    pregunta: "¿Capital de Argentina?",
+    opciones: ["Rosario", "Córdoba", "Buenos Aires", "Mendoza"],
+    correcta: 2
+  },
+  {
+    pregunta: "¿Capital de Brasil?",
+    opciones: ["Brasilia", "Río", "San Pablo", "Lima"],
+    correcta: 0
+  },
+  {
+    pregunta: "¿Capital de Italia?",
+    opciones: ["Roma", "Milán", "Nápoles", "Venecia"],
+    correcta: 0
+  },
+  {
+    pregunta: "¿Capital de Alemania?",
+    opciones: ["Hamburgo", "Berlín", "Múnich", "Frankfurt"],
+    correcta: 1
+  }
+];
+
+const quiz = document.querySelector("#quiz");
+const botonSiguiente = document.querySelector("#siguiente");
+
+let indice = 0;
+let puntaje = 0;
+
+function mostrarPregunta() {
+  quiz.innerHTML = "";
+
+  const pregunta = preguntas[indice];
+
+  const h2 = document.createElement("h2");
+  h2.textContent = pregunta.pregunta;
+
+  quiz.appendChild(h2);
+
+  pregunta.opciones.forEach((opcion, i) => {
+    const boton = document.createElement("button");
+
+    boton.textContent = opcion;
+
+    boton.addEventListener("click", () => {
+      verificarRespuesta(i);
+    });
+
+    quiz.appendChild(boton);
+  });
+}
+
+function verificarRespuesta(opcionElegida) {
+  const correcta = preguntas[indice].correcta;
+
+  if (opcionElegida === correcta) {
+    puntaje++;
+    alert("Correcto");
+  } else {
+    alert("Incorrecto");
+  }
+
+  botonSiguiente.style.display = "block";
+}
+
+botonSiguiente.addEventListener("click", () => {
+  indice++;
+
+  if (indice < preguntas.length) {
+    mostrarPregunta();
+    botonSiguiente.style.display = "none";
+  } else {
+    mostrarResultado();
+  }
+});
+
+function mostrarResultado() {
+  quiz.innerHTML = `
+    <h2>Puntaje: ${puntaje} de ${preguntas.length}</h2>
+    <button id="reiniciar">Reiniciar</button>
+  `;
+
+  botonSiguiente.style.display = "none";
+
+  document
+    .querySelector("#reiniciar")
+    .addEventListener("click", () => {
+      indice = 0;
+      puntaje = 0;
+      mostrarPregunta();
+    });
+}
+
+mostrarPregunta();
--- a/ejercicio9/index.html
+++ b/ejercicio9/index.html
@@ -8,7 +8,13 @@
    </head>
    <body>
        <h1>Ejercicio 9</h1>
+<h1>Quiz</h1>

+<div id="quiz"></div>
+
+<button id="siguiente" style="display:none">
+  Siguiente
+</button>
        <script src="ejercicio9.js"></script>
    </body>
 </html>
Author	SHA1	Message	Date
Sergio Madera De Marco	9233c5da7c	ejercicio 9: quiz de opcion multiple	2026-05-28 14:00:44 -03:00
Sergio Madera De Marco	909acdf862	ejercicio 8: carrito de compras	2026-05-28 13:56:45 -03:00
Sergio Madera De Marco	f9f562bf1c	ejercicio 6: tabla dinamica de empleados	2026-05-28 13:46:22 -03:00
Sergio Madera De Marco	6b28028009	ejercicio 5: filtro de lista en tiempo real	2026-05-28 13:40:59 -03:00
Sergio Madera De Marco	4b110835c7	ejercicio 4: contador con limite	2026-05-28 13:33:50 -03:00
Sergio Madera De Marco	ee4770f32c	ejercicio 3: resaltador de items con delegacion de eventos	2026-05-28 13:27:31 -03:00
Sergio Madera De Marco	9dee9e34ad	ejercicio 2: lista de tareas simples	2026-05-28 13:15:34 -03:00
Sergio Madera De Marco	3f3d33484c	ejercicio 1: saludo personalizado	2026-05-28 13:04:44 -03:00