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
22 changed files with 570 additions and 31 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,11 +1,11 @@
-const lista = document.querySelector("#lista");
+const listaItems = document.getElementById('lista-items');

-// Un solo listener en la lista, no uno por ítem (delegación de eventos).
-lista.addEventListener("click", (e) => {
-    // Verificamos que el clic fue sobre un <li>. Si fue sobre otro elemento,
-    // retornamos sin hacer nada.
-    if (e.target.tagName !== "LI") return;
+listaItems.addEventListener('click', (event) => {
+    const item = event.target;

-    // toggle agrega la clase si no la tiene, y la quita si ya la tenía.
-    e.target.classList.toggle("seleccionado");
+    if (item.tagName.toLowerCase() !== 'li') {
+        return;
+    }
+
+    item.classList.toggle('seleccionado');
 });
--- a/ejercicio3/estilo.css
+++ b/ejercicio3/estilo.css
@@ -1,3 +1,5 @@
+/* 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,20 +2,20 @@
 <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">
-            <li>Elemento 1</li>
-            <li>Elemento 2</li>
-            <li>Elemento 3</li>
-            <li>Elemento 4</li>
-            <li>Elemento 5</li>
-            <li>Elemento 6</li>
+        <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>
--- 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 +1,71 @@
-// Agregar aquí el código javascript
+const productos = [
+  { nombre: "Teclado", precio: 8500 },
+  { nombre: "Mouse", precio: 4200 },
+  { nombre: "Monitor", precio: 62000 },
+  { nombre: "Auriculares", precio: 11000 },
+  { nombre: "Webcam", precio: 15500 }
+];
+
+const contenedorProductos = document.querySelector("#productos");
+const carritoLista = document.querySelector("#carrito");
+const totalTexto = document.querySelector("#total");
+
+const carrito = [];
+
+function mostrarProductos() {
+  for (const producto of productos) {
+    const div = document.createElement("div");
+
+    div.innerHTML = `
+      <span>${producto.nombre} - $${producto.precio}</span>
+      <button>Agregar al carrito</button>
+    `;
+
+    const boton = div.querySelector("button");
+
+    boton.addEventListener("click", () => {
+      agregarAlCarrito(producto);
+    });
+
+    contenedorProductos.appendChild(div);
+  }
+}
+
+function agregarAlCarrito(producto) {
+  const existente = carrito.find(
+    item => item.nombre === producto.nombre
+  );
+
+  if (existente) {
+    existente.cantidad++;
+  } else {
+    carrito.push({
+      nombre: producto.nombre,
+      precio: producto.precio,
+      cantidad: 1
+    });
+  }
+
+  actualizarCarrito();
+}
+
+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}`;
+}
+
+mostrarProductos();
--- a/ejercicio8/index.html
+++ b/ejercicio8/index.html
@@ -8,7 +8,15 @@
    </head>
    <body>
        <h1>Ejercicio 8</h1>
+<h1>Productos</h1>

+<div id="productos"></div>
+
+<h2>Carrito</h2>
+
+<ul id="carrito"></ul>
+
+<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