saucedo.facundo/clase-10-ejercicios-de-repaso
1
0
Fork 0
forked from marquez.juan/clase-10-ejercicios-de-repaso
Code Pull Requests Activity

Compare commits

base: saucedo.facundo:e53d19494265751107dbec8126a7049b7a83a0d1
Branches Tags
saucedo.facundo:main saucedo.facundo:feat/excersices 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 marquez.juan:main
..
compare: marquez.juan:solucion-ejercicio-8
Branches Tags
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 marquez.juan:main saucedo.facundo:main saucedo.facundo:feat/excersices

1 Commits
e53d194942 ... solucion-e

Author SHA1 Message Date
Juanse Marquez
5513e42fc0 Solución ejercicio 8 2026-06-01 18:48:45 -03:00
20 changed files with 319 additions and 368 deletions
Expand all files Collapse all files

9
ejercicio1/ejercicio1.js
View File

@@ -1,10 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
document.getElementById('greet').addEventListener('click', () => {
const name = document.getElementById('name').value;
if (name.trim() === '') {
alert('Por favor, ingresa tu nombre.');
return;
}
document.getElementById('greeting').textContent = `¡Hola, ${name}!`;
});

5
ejercicio1/index.html
View File

@@ -8,10 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 1</h1> <h1>Ejercicio 1</h1>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<button id="greet">Saludar</button>
<p id="greeting"></p>
<script src="ejercicio1.js"></script> <script src="ejercicio1.js"></script>
</body> </body>
</html> </html>

14
ejercicio2/ejercicio2.js
View File

@@ -1,15 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
document.getElementById('addTask').addEventListener('click', () => {
const taskInput = document.getElementById('task');
const task = taskInput.value.trim();
if (task === '') {
alert('Por favor, ingresa una tarea.');
return;
}
const taskList = document.getElementById('taskList');
const li = document.createElement('li');
li.textContent = task;
taskList.appendChild(li);
taskInput.value = '';
});

5
ejercicio2/index.html
View File

@@ -8,10 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 2</h1> <h1>Ejercicio 2</h1>
<label for="task">Crea una nueva tarea:</label>
<input type="text" id="task" name="task">
<button id="addTask">Agregar tarea</button>
<ul id="taskList"></ul>
<script src="ejercicio2.js"></script> <script src="ejercicio2.js"></script>
</body> </body>
</html> </html>

6
ejercicio3/ejercicio3.js
View File

@@ -1,7 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
document.getElementById('itemList').addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('selected');
}
});

3
ejercicio3/estilo.css
View File

@@ -1,5 +1,2 @@
/* Agregar el código CSS necesario para el ejercicio */ /* Agregar el código CSS necesario para el ejercicio */
.selected {
background-color: lightblue;
}

9
ejercicio3/index.html
View File

@@ -8,14 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 3</h1> <h1>Ejercicio 3</h1>
<ul id="itemList">
<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>
<script src="ejercicio3.js"></script> <script src="ejercicio3.js"></script>
</body> </body>
</html> </html>

32
ejercicio4/ejercicio4.js
View File

@@ -1,33 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');
const counterDisplay = document.getElementById('counter');
let counter = 0;
incrementButton.addEventListener('click', () => {
if (counter >= 10) {
incrementButton.disabled = true;
alert('El contador ha alcanzado el valor máximo de 10.');
return;
}
counter++;
if (counter > 0) {
decrementButton.disabled = false;
}
counterDisplay.textContent = counter;
});
decrementButton.addEventListener('click', () => {
if (counter <= 0) {
decrementButton.disabled = true;
alert('El contador ha alcanzado el valor mínimo de 0.');
return;
}
counter--;
if (counter < 10) {
incrementButton.disabled = false;
}
counterDisplay.textContent = counter;
});

4
ejercicio4/index.html
View File

@@ -8,9 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 4</h1> <h1>Ejercicio 4</h1>
<p> Contador: <span id="counter">0</span></p>
<button id="increment">Incrementar</button>
<button id="decrement">Decrementar</button>
<script src="ejercicio4.js"></script> <script src="ejercicio4.js"></script>
</body> </body>
</html> </html>

44
ejercicio5/ejercicio5.js
View File

@@ -1,45 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
const countries = [
'Argentina',
'Brasil',
'Chile',
'Colombia',
'Ecuador',
'Perú',
'Uruguay',
'Venezuela',
'Paraguay',
'Bolivia',
'Panamá',
'Costa Rica',
'Cuba',
'República Dominicana',
'Guatemala',
'Honduras',
'El Salvador',
'Nicaragua',
'Puerto Rico',
'México',
'Estados Unidos',
'Canadá',
'Guayana',
'Surinam',
'Guyana Francesa',
];
document.getElementById('search').addEventListener('input', () => {
const query = document.getElementById('search').value.toLowerCase();
const resultsList = document.getElementById('resultsList');
resultsList.innerHTML = '';
const filteredCountries = countries.filter(country =>
country.toLowerCase().includes(query)
);
filteredCountries.forEach(country => {
const li = document.createElement('li');
li.textContent = country;
resultsList.appendChild(li);
});
});

6
ejercicio5/index.html
View File

@@ -8,11 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 5</h1> <h1>Ejercicio 5</h1>
<div id="results">
<label for="search">Buscar:</label>
<input type="text" id="search" name="search">
<ul id="resultsList"></ul>
</div>
<script src="ejercicio5.js"></script> <script src="ejercicio5.js"></script>
</body> </body>
</html> </html>

42
ejercicio6/ejercicio6.js
View File

@@ -1,43 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
const employees = [
{ name: "Ana", sector: "Desarrollo", salary: 150000 },
{ name: "Luis", sector: "Diseño", salary: 120000 },
{ name: "Marta", sector: "Desarrollo", salary: 160000 },
{ name: "Carlos", sector: "RRHH", salary: 110000 },
{ name: "Julia", sector: "Diseño", salary: 130000 }
];
const tableContainer = document.getElementById('tableEmployees');
const table = document.createElement('table');
const headerRow = document.createElement('tr');
['Nombre', 'Sector', 'Salario'].forEach(headerText => {
const th = document.createElement('th');
th.textContent = headerText;
headerRow.appendChild(th);
});
table.appendChild(headerRow);
tableContainer.appendChild(table);
employees.forEach(employee => {
const row = document.createElement('tr');
['name', 'sector', 'salary'].forEach(key => {
const td = document.createElement('td');
td.textContent = employee[key];
row.appendChild(td);
});
table.appendChild(row);
});
table.appendChild(document.createElement('tr')); // Fila vacía para separación
const averageSalary = employees.reduce((sum, emp) => sum + emp.salary, 0) / employees.length;
const averageRow = document.createElement('tr');
const averageLabelCell = document.createElement('td');
averageLabelCell.textContent = 'Salario Promedio';
averageRow.appendChild(averageLabelCell);
const averageValueCell = document.createElement('td');
averageValueCell.textContent = averageSalary;
averageRow.appendChild(averageValueCell);
table.appendChild(averageRow);

2
ejercicio6/index.html
View File

@@ -8,9 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 6</h1> <h1>Ejercicio 6</h1>
<div id="tableEmployees">
</div>
<script src="ejercicio6.js"></script> <script src="ejercicio6.js"></script>
</body> </body>
</html> </html>

23
ejercicio7/ejercicio7.js
View File

@@ -1,24 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
const userForm = document.getElementById('userForm');
userForm.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.getElementById('username').value.trim();
const age = parseInt(document.getElementById('age').value);
const password = document.getElementById('password').value;
if (username === '') {
alert('El nombre de usuario no puede estar vacío.');
return;
}
if (isNaN(age) || age < 0 || age > 100) {
alert('La edad debe ser un número válido entre 0 y 100.');
return;
}
if (password.length < 8) {
alert('La contraseña debe tener al menos 8 caracteres.');
return;
}
alert('Formulario enviado correctamente.');
userForm.reset();
});

10
ejercicio7/index.html
View File

@@ -8,15 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 7</h1> <h1>Ejercicio 7</h1>
<form id="userForm">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" required>
<label for="age">Edad:</label>
<input type="number" id="age" name="age" required>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Enviar</button>
</form>
<script src="ejercicio7.js"></script> <script src="ejercicio7.js"></script>
</body> </body>
</html> </html>

112
ejercicio8/ejercicio8.js
View File

@@ -1,68 +1,72 @@
// Agregar aquí el código javascript const productos = [
{ nombre: "Teclado", precio: 8500 },
const products = [ { nombre: "Mouse", precio: 4200 },
{ name: "Teclado", price: 8500 }, { nombre: "Monitor", precio: 62000 },
{ name: "Mouse", price: 4200 }, { nombre: "Auriculares", precio: 11000 },
{ name: "Monitor", price: 62000 }, { nombre: "Webcam", precio: 15500 }
{ name: "Auriculares", price: 11000 },
{ name: "Webcam", price: 15500 }
]; ];
const productList = document.getElementById('productList'); // El carrito es un array de objetos { nombre, precio, cantidad }, que
const checkout = document.getElementById('checkout'); // inicializamos vacío fuera de las funciones (para que sea global):
const carrito = [];
products.forEach(product => { const listaProductos = document.querySelector("#productos");
const productDiv = document.createElement('div');
productDiv.textContent = `${product.name} - $${product.price} `;
const buyButton = document.createElement('button');
buyButton.textContent = 'Comprar';
productDiv.appendChild(buyButton);
productList.appendChild(productDiv);
});
const cart = new Map(); function actualizarCarrito() {
const totalParrafo = document.querySelector("#total");
const listaCarrito = document.querySelector("#carrito");
listaCarrito.innerHTML = "";
const renderCart = () => { // Calculamos el total mientras construimos la lista.
checkout.innerHTML = ''; let total = 0;
if (cart.size === 0) { for (const item of carrito) {
checkout.innerHTML = '<p>Carrito vacío</p>'; const subtotal = item.precio * item.cantidad;
return; total += subtotal;
const li = document.createElement("li");
li.textContent = `${item.nombre} x${item.cantidad} — $${subtotal.toLocaleString()}`;
listaCarrito.appendChild(li);
} }
let totalPrice = 0; totalParrafo.textContent = `Total: $${total.toLocaleString()}`;
}
cart.forEach((quantity, product) => { function agregarAlCarrito(producto) {
const lineTotal = product.price * quantity; // Buscamos si el producto ya está en el carrito.
totalPrice += lineTotal; const itemExistente = carrito.find(item => item.nombre === producto.nombre);
const itemRow = document.createElement('div'); if (itemExistente) {
itemRow.innerHTML = ` // Si ya existe, solo incrementamos la cantidad.
<div>${product.name} -------- x${quantity}</div> itemExistente.cantidad++;
<div>$${lineTotal.toLocaleString()}</div> } 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>
`; `;
checkout.appendChild(itemRow); card.querySelector(".btn-add").addEventListener("click", () => agregarAlCarrito(producto));
}); listaProductos.appendChild(card);
const totalRow = document.createElement('div');
totalRow.innerHTML = `<strong>Total: ------------- $${totalPrice.toLocaleString()}</strong>`;
checkout.appendChild(totalRow);
};
productList.addEventListener('click', (event) => {
if (event.target.tagName === 'BUTTON') {
const productDiv = event.target.parentElement;
const productName = productDiv.textContent.split(' - ')[0];
const product = products.find(p => p.name === productName);
if (!product) {
return;
} }
const currentQty = cart.get(product) || 0; actualizarCarrito();
cart.set(product, currentQty + 1);
renderCart();
}
});
renderCart();

215
ejercicio8/estilo.css
View File

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

38
ejercicio8/index.html
View File

@@ -1,19 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="es">
<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 8</title> <title>Ejercicio 8 — Carrito de compras</title>
<style></style>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Ejercicio 8</h1>
<div id="productList"> <h1>Ejercicio 8 — Carrito de compras</h1>
<!-- Acá se mostrarán los productos -->
<div class="layout">
<div>
<p class="section-label">Productos</p>
<div class="product-list" id="productos"></div>
</div> </div>
<div id="checkout">
<!-- Acá se mostrará el precio total --> <div class="cart-panel">
<div class="cart-header">
<p class="section-label" style="margin:0">
Carrito
</p>
</div> </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> <script src="ejercicio8.js"></script>
</body> </body>
</html> </html>

79
ejercicio9/ejercicio9.js
View File

@@ -1,80 +1 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
const questions = [
{
question: "¿Cuál es la capital de Francia?",
options: ["Londres", "Berlín", "París", "Roma"],
correctAnswer: 2
},
{
question: "¿Cuál es el río más largo del mundo?",
options: ["Nilo", "Amazonas", "Yangtsé", "Misisipi"],
correctAnswer: 1
},
{
question: "¿Quién escribió 'Cien años de soledad'?",
options: ["Gabriel García Márquez", "Mario Vargas Llosa", "Isabel Allende", "Jorge Luis Borges"],
correctAnswer: 0
},
{
question: "¿Cuál es el planeta más grande del sistema solar?",
options: ["Júpiter", "Saturno", "Urano", "Neptuno"],
correctAnswer: 0
},
{
question: "¿En qué año se descubrió América?",
options: ["1492", "1500", "1485", "1510"],
correctAnswer: 0
}
];
let currentQuestionIndex = 0;
let score = 0;
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const resultElement = document.getElementById('result');
const loadQuestion = () => {
const currentQuestion = questions[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
optionsElement.innerHTML = '';
currentQuestion.options.forEach((option, index) => {
const li = document.createElement('li');
const button = document.createElement('button');
button.textContent = option;
li.appendChild(button);
button.addEventListener('click', () => checkAnswer(index));
optionsElement.appendChild(li);
});
};
const checkAnswer = (selectedIndex) => {
const currentQuestion = questions[currentQuestionIndex];
if (selectedIndex === currentQuestion.correctAnswer) {
resultElement.textContent = "¡Correcto!";
score++;
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
setTimeout(() => {
resultElement.textContent = '';
loadQuestion();
}, 1000);
} else {
resultElement.textContent = `¡Juego terminado! Tu puntuación es ${score}/${questions.length}.`;
}
} else {
resultElement.textContent = "Incorrecto. La respuesta correcta es: " + currentQuestion.options[currentQuestion.correctAnswer];
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
setTimeout(() => {
resultElement.textContent = '';
loadQuestion();
}, 2000);
} else {
resultElement.textContent = `¡Juego terminado! Tu puntuación es ${score}/${questions.length}.`;
}
}
};
loadQuestion();

7
ejercicio9/index.html
View File

@@ -8,12 +8,7 @@
</head> </head>
<body> <body>
<h1>Ejercicio 9</h1> <h1>Ejercicio 9</h1>
<div id="quizGame">
<p id="instructions">Responde a la pregunta correcta</p>
<p id="question"></p>
<ul id="options"></ul>
<p id="result"></p>
</div>
<script src="ejercicio9.js"></script> <script src="ejercicio9.js"></script>
</body> </body>
</html> </html>