marquez.juan/clase-9-eventos
1
0
Fork 16
Code Issues Pull Requests 10 Projects Releases Wiki Activity

Compare commits

base: marquez.juan:main
Branches Tags
marquez.juan:main saucedo.facundo:feat/excersices saucedo.facundo:main
..
compare: saucedo.facundo:feat/excersices
Branches Tags
saucedo.facundo:feat/excersices saucedo.facundo:main marquez.juan:main

5 Commits
main ... feat/excer

Author SHA1 Message Date
Facundo Saucedo
b7d5d9a176 feat: add form validation and submission handling for exercise 5 2026-05-20 17:20:46 -03:00
Facundo Saucedo
36afe58c6f feat: implement event handling for exercise 4 with capturing and logging 2026-05-20 16:24:05 -03:00
Facundo Saucedo
e7d0ca8aa2 feat: implement item selection functionality in exercise 3 2026-05-20 16:13:14 -03:00
Facundo Saucedo
b97fb32d67 feat: add character count functionality to text input 2026-05-20 16:03:21 -03:00
Facundo Saucedo
0b8e8b5bd7 feat: add click counter button interaction 2026-05-20 15:44:02 -03:00
3 changed files with 208 additions and 29 deletions
Expand all files Collapse all files

114
clase-9.js
View File

@@ -1 +1,115 @@
// Agregar acá el código javascript para los ejercicios // Agregar acá el código javascript para los ejercicios
// Ejercicio 1
const clickCounter = document.getElementById('clickCounter');
const clickButton = document.getElementById('clickButton');
let count = 0;
clickButton.addEventListener('click', () => {
count++;
clickCounter.textContent = count;
});
// Ejercicio 2
const textInput = document.getElementById('textInput');
const charCount = document.getElementById('charCount');
textInput.addEventListener('input', () => {
charCount.textContent = textInput.value.length;
});
// Ejercicio 3
const itemList = document.getElementById('itemList');
itemList.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
const items = itemList.querySelectorAll('li');
items.forEach(item => item.classList.remove('selected'));
event.target.classList.add('selected');
}
});
// Ejercicio 4
const outside = document.getElementById('outside');
const inside = document.getElementById('inside');
const insideButton = document.getElementById('insideButton');
outside.addEventListener('click', () => {
console.log("outside");
});
inside.addEventListener('click', () => {
console.log("inside");
})
insideButton.addEventListener('click', () => {
console.log("button");
});
outside.addEventListener('click', () => {
console.log("outside capturing");
}, true);
// Ejercicio 5
const userForm = document.getElementById('userForm');
const nameInput = document.getElementById('nameInput');
const ageInput = document.getElementById('ageInput');
const messageInput = document.getElementById('messageInput');
const clearErrors = () => {
document.getElementById('nameError').textContent = '';
document.getElementById('ageError').textContent = '';
document.getElementById('messageError').textContent = '';
}
const validateForm = () => {
let isValid = true;
if (nameInput.value.trim() === '') {
document.getElementById('nameError').textContent = 'El nombre es obligatorio.';
isValid = false;
}
const age = parseInt(ageInput.value);
if (isNaN(age) || age < 0 || age > 120) {
document.getElementById('ageError').textContent = 'La edad debe ser un número entre 0 y 120.';
isValid = false;
}
if (messageInput.value.trim() === '') {
document.getElementById('messageError').textContent = 'El mensaje es obligatorio.';
isValid = false;
}
return isValid;
}
const showSuccessMessage = () => {
alert('Formulario enviado con éxito!');
}
const clearForm = () => {
nameInput.value = '';
ageInput.value = '';
messageInput.value = '';
}
const handleSubmit = (event) => {
event.preventDefault();
clearErrors();
const isValid = validateForm();
if (isValid) {
showSuccessMessage();
clearForm();
}}
userForm.addEventListener('submit', handleSubmit);

22
estilo.css
View File

@@ -3,3 +3,25 @@ div {
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
li {
cursor: pointer;
}
.selected {
background-color: #007bff;
color: white;
font-weight: bold;
border-radius: 6px;
padding: 4px 8px;
}
.errorMessage {
color: red;
font-size: 14px;
}
#successMessage {
color: green;
font-weight: bold;
}

61
index.html
View File

@@ -1,32 +1,75 @@
<!DOCTYPE html> <!DOCTYPE html>
<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">
<title>Clase 9 - Eventos</title> <title>Clase 9 - Eventos</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body>
<body>
<h1>Clase 9 - Eventos</h1> <h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1"> <div id="ejercicio-1">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 1 --> <p> Este boton ha sido clickeado <span id="clickCounter">0</span> veces</p>
<button id="clickButton">Clickeame!</button>
</div> </div>
<hr> <hr>
<div id="ejercicio-2"> <div id="ejercicio-2">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 2 --> <label for="textInput">
Esto es un campo de texto, probá escribir en él:
</label>
<input type="text" id="textInput">
<p>
Caracteres ingresados:
<span id="charCount">0</span>
</p>
</div> </div>
<hr> <hr>
<div id="ejercicio-3"> <div id="ejercicio-3">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 3 --> <ul id="itemList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div> </div>
<hr> <hr>
<div id="ejercicio-4"> <div id="ejercicio-4">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 4 --> <div id="outside">
<div id="inside">
<button id="insideButton">Click</button>
</div>
</div>
</div> </div>
<hr> <hr>
<div id="ejercicio-5"> <div id="ejercicio-5">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 5 --> <form id="userForm">
<label for="nameInput">Nombre:</label>
<input type="text" id="nameInput">
<p id="nameError" class="errorMessage"></p>
<label for="ageInput">Edad:</label>
<input type="number" id="ageInput">
<p id="ageError" class="errorMessage"></p>
<label for="messageInput">Mensaje:</label>
<textarea id="messageInput"></textarea>
<p id="messageError" class="errorMessage"></p>
<button type="submit">
Enviar
</button>
<p id="successMessage"></p>
</form>
</div> </div>
<script src="clase-9.js"></script> <script src="clase-9.js"></script>
</body> </body>
</html> </html>