marquez.juan/clase-10-ejercicios-de-repaso
1
0
Fork 7
Code Issues Pull Requests 4 Projects Releases Wiki Activity

Compare commits

merge into: marquez.juan:main
Branches Tags
marquez.juan:main marquez.juan:solucion-ejercicio-9 marquez.juan:solucion-ejercicio-8 marquez.juan:solucion-ejercicio-7 marquez.juan:solucion-ejercicio-6 marquez.juan:solucion-ejercicio-5 marquez.juan:solucion-ejercicio-4 marquez.juan:solucion-ejercicio-3 marquez.juan:solucion-ejercicio-2 marquez.juan:solucion-ejercicio-1 maderademarco.sergio:repaso-primer-cuatrimestre maderademarco.sergio:main
...
pull from: maderademarco.sergio:repaso-primer-cuatrimestre
Branches Tags
maderademarco.sergio:repaso-primer-cuatrimestre maderademarco.sergio:main marquez.juan:main marquez.juan:solucion-ejercicio-9 marquez.juan:solucion-ejercicio-8 marquez.juan:solucion-ejercicio-7 marquez.juan:solucion-ejercicio-6 marquez.juan:solucion-ejercicio-5 marquez.juan:solucion-ejercicio-4 marquez.juan:solucion-ejercicio-3 marquez.juan:solucion-ejercicio-2 marquez.juan:solucion-ejercicio-1

8 Commits

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
22 changed files with 577 additions and 16 deletions
Expand all files Collapse all files

14
ejercicio1/ejercicio1.js
View File

@@ -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}!`;
}
});

8
ejercicio1/index.html
View File

@@ -2,13 +2,19 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 1</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 1</h1> <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> <script src="ejercicio1.js"></script>
</body> </body>
</html> </html>

17
ejercicio2/ejercicio2.js
View File

@@ -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 = '';
});

8
ejercicio2/index.html
View File

@@ -2,13 +2,19 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 2</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 2</h1> <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> <script src="ejercicio2.js"></script>
</body> </body>
</html> </html>

12
ejercicio3/ejercicio3.js
View File

@@ -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');
});

5
ejercicio3/estilo.css
View File

@@ -1,2 +1,7 @@
/* Agregar el código CSS necesario para el ejercicio */ /* Agregar el código CSS necesario para el ejercicio */
.seleccionado {
background-color: yellow;
font-weight: bold;
}

11
ejercicio3/index.html
View File

@@ -2,13 +2,22 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 3</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 3</h1> <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> <script src="ejercicio3.js"></script>
</body> </body>
</html> </html>

30
ejercicio4/ejercicio4.js
View File

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

6
ejercicio4/index.html
View File

@@ -2,13 +2,17 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 4</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 4</h1> <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> <script src="ejercicio4.js"></script>
</body> </body>
</html> </html>

44
ejercicio5/ejercicio5.js
View File

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

26
ejercicio5/estilo.css
View File

@@ -1,2 +1,28 @@
/* Agregar el código CSS necesario para el ejercicio */ /* 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;
}

7
ejercicio5/index.html
View File

@@ -2,13 +2,18 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 5</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 5</h1> <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> <script src="ejercicio5.js"></script>
</body> </body>
</html> </html>

51
ejercicio6/ejercicio6.js
View File

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

26
ejercicio6/estilo.css
View File

@@ -1,2 +1,28 @@
/* Agregar el código CSS necesario para el ejercicio */ /* 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;
}

14
ejercicio6/index.html
View File

@@ -2,13 +2,25 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 6</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 6</h1> <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> <script src="ejercicio6.js"></script>
</body> </body>
</html> </html>

62
ejercicio7/ejercicio7.js
View File

@@ -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 = '';
}
});

40
ejercicio7/estilo.css
View File

@@ -1,2 +1,42 @@
/* Agregar el código CSS necesario para el ejercicio */ /* 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;
}

26
ejercicio7/index.html
View File

@@ -2,13 +2,37 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>Ejercicio 7</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 7</h1> <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> <script src="ejercicio7.js"></script>
</body> </body>
</html> </html>

72
ejercicio8/ejercicio8.js
View File

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

8
ejercicio8/index.html
View File

@@ -8,7 +8,15 @@
</head> </head>
<body> <body>
<h1>Ejercicio 8</h1> <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> <script src="ejercicio8.js"></script>
</body> </body>
</html> </html>

100
ejercicio9/ejercicio9.js
View File

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

6
ejercicio9/index.html
View File

@@ -8,7 +8,13 @@
</head> </head>
<body> <body>
<h1>Ejercicio 9</h1> <h1>Ejercicio 9</h1>
<h1>Quiz</h1>
<div id="quiz"></div>
<button id="siguiente" style="display:none">
Siguiente
</button>
<script src="ejercicio9.js"></script> <script src="ejercicio9.js"></script>
</body> </body>
</html> </html>