diff --git a/clase-9.js b/clase-9.js index 6df1007..5a5d7f7 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,115 @@ // 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); \ No newline at end of file diff --git a/estilo.css b/estilo.css index 19d93f8..b7d70a3 100644 --- a/estilo.css +++ b/estilo.css @@ -3,3 +3,25 @@ div { padding: 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; +} \ No newline at end of file diff --git a/index.html b/index.html index 2a6b85f..3f1d364 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,75 @@ - - - - Clase 9 - Eventos - - - -

Clase 9 - Eventos

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

Clase 9 - Eventos

+
+

Este boton ha sido clickeado 0 veces

+ +
+
+
+ + + + +

+ Caracteres ingresados: + 0 +

+
+
+
+ +
+
+
+
+
+ +
-
-
- -
-
-
- -
-
-
- -
-
-
- -
- - - +
+
+
+
+ + + +

+ + + +

+ + + +

+ + + +

+ +
+
+ + + + \ No newline at end of file