From 0b8e8b5bd7edc131568befc05e5122faa0f814af Mon Sep 17 00:00:00 2001 From: Facundo Saucedo <43495919@terciariourquiza.edu.ar> Date: Wed, 20 May 2026 15:44:02 -0300 Subject: [PATCH 1/5] feat: add click counter button interaction --- clase-9.js | 12 ++++++++++++ index.html | 3 ++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/clase-9.js b/clase-9.js index 6df1007..a3d6541 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,13 @@ // 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; +}); diff --git a/index.html b/index.html index 2a6b85f..517f21e 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@

Clase 9 - Eventos

- +

Este boton ha sido clickeado 0 veces

+
-- 2.49.1 From b97fb32d679f8d75ad7fa00fd1936a3da635cf8d Mon Sep 17 00:00:00 2001 From: Facundo Saucedo <43495919@terciariourquiza.edu.ar> Date: Wed, 20 May 2026 16:03:21 -0300 Subject: [PATCH 2/5] feat: add character count functionality to text input --- clase-9.js | 9 +++++++ index.html | 74 +++++++++++++++++++++++++++++++----------------------- 2 files changed, 52 insertions(+), 31 deletions(-) diff --git a/clase-9.js b/clase-9.js index a3d6541..1ce769c 100644 --- a/clase-9.js +++ b/clase-9.js @@ -11,3 +11,12 @@ 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; +}); diff --git a/index.html b/index.html index 517f21e..c8b10b9 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,45 @@ - - - - Clase 9 - Eventos - - - -

Clase 9 - Eventos

-
-

Este boton ha sido clickeado 0 veces

- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
- - - + + + + + Clase 9 - Eventos + + + + +

Clase 9 - Eventos

+
+

Este boton ha sido clickeado 0 veces

+ +
+
+
+ + + + +

+ Caracteres ingresados: + 0 +

+
+
+
+ +
+
+
+ +
+
+
+ +
+ + + + \ No newline at end of file -- 2.49.1 From e7d0ca8aa22e90c513bf3af1a5a9bede4cdf76ef Mon Sep 17 00:00:00 2001 From: Facundo Saucedo <43495919@terciariourquiza.edu.ar> Date: Wed, 20 May 2026 16:13:14 -0300 Subject: [PATCH 3/5] feat: implement item selection functionality in exercise 3 --- clase-9.js | 12 ++++++++++++ estilo.css | 12 ++++++++++++ index.html | 14 ++++++++++++-- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/clase-9.js b/clase-9.js index 1ce769c..0695dcf 100644 --- a/clase-9.js +++ b/clase-9.js @@ -20,3 +20,15 @@ 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'); + } +}); diff --git a/estilo.css b/estilo.css index 19d93f8..e0ce57c 100644 --- a/estilo.css +++ b/estilo.css @@ -3,3 +3,15 @@ div { padding: 10px; margin: 10px; } + +li { + cursor: pointer; +} + +.selected { + background-color: #007bff; + color: white; + font-weight: bold; + border-radius: 6px; + padding: 4px 8px; +} \ No newline at end of file diff --git a/index.html b/index.html index c8b10b9..768e3fa 100644 --- a/index.html +++ b/index.html @@ -29,11 +29,21 @@
- +
- +
+
+ +
+
-- 2.49.1 From 36afe58c6fd17a33106759339498d6167b365011 Mon Sep 17 00:00:00 2001 From: Facundo Saucedo <43495919@terciariourquiza.edu.ar> Date: Wed, 20 May 2026 16:24:05 -0300 Subject: [PATCH 4/5] feat: implement event handling for exercise 4 with capturing and logging --- clase-9.js | 22 ++++++++++++++++++++++ index.html | 6 +++--- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/clase-9.js b/clase-9.js index 0695dcf..4f32c34 100644 --- a/clase-9.js +++ b/clase-9.js @@ -32,3 +32,25 @@ itemList.addEventListener('click', (event) => { 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); \ No newline at end of file diff --git a/index.html b/index.html index 768e3fa..90ba7fb 100644 --- a/index.html +++ b/index.html @@ -39,9 +39,9 @@
-
-
- +
+
+
-- 2.49.1 From b7d5d9a176a4ba229f8c8bb9a9026b836362e24d Mon Sep 17 00:00:00 2001 From: Facundo Saucedo <43495919@terciariourquiza.edu.ar> Date: Wed, 20 May 2026 17:20:46 -0300 Subject: [PATCH 5/5] feat: add form validation and submission handling for exercise 5 --- clase-9.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++- estilo.css | 10 +++++++++ index.html | 22 +++++++++++++++++++- 3 files changed, 91 insertions(+), 2 deletions(-) diff --git a/clase-9.js b/clase-9.js index 4f32c34..5a5d7f7 100644 --- a/clase-9.js +++ b/clase-9.js @@ -53,4 +53,63 @@ insideButton.addEventListener('click', () => { outside.addEventListener('click', () => { console.log("outside capturing"); -}, true); \ No newline at end of file +}, 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); \ No newline at end of file diff --git a/estilo.css b/estilo.css index e0ce57c..b7d70a3 100644 --- a/estilo.css +++ b/estilo.css @@ -14,4 +14,14 @@ li { font-weight: bold; border-radius: 6px; padding: 4px 8px; +} + +.errorMessage { + color: red; + font-size: 14px; +} + +#successMessage { + color: green; + font-weight: bold; } \ No newline at end of file diff --git a/index.html b/index.html index 90ba7fb..3f1d364 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,27 @@
- +
+ + + +

+ + + +

+ + + +

+ + + +

+ +
-- 2.49.1