ejercicio 1: contador de clicks con addEventListener

clase-9.js

@@ -7,105 +7,3 @@ boton.addEventListener('click', function() {
     clickCount++;
     parrafo.textContent = `Botón clickeado ${clickCount} veces`;
 });
-
-// Ejercicio 2 - Contador de caracteres en tiempo real
-const inputTexto = document.getElementById('campoTexto');
-const contadorCaracteres = document.getElementById('contadorCaracteres');
-
-inputTexto.addEventListener('input', function() {
-    contadorCaracteres.textContent = `Caracteres ingresados: ${inputTexto.value.length}`;
-});
-
-// Ejercicio 3 - Selección única en lista mediante delegación de eventos
-const lista = document.getElementById('listaItems');
-
-lista.addEventListener('click', function(event) {
-    const item = event.target.closest('li');
-    if (!item || !lista.contains(item)) {
-        return;
-    }
-
-    lista.querySelectorAll('li').forEach(function(li) {
-        li.classList.remove('seleccionado');
-    });
-    item.classList.add('seleccionado');
-});
-
-// Ejercicio 4 - Listeners de bubbling y capturing
-const externo = document.getElementById('externo');
-const interno = document.getElementById('interno');
-const botonExterno = document.getElementById('botonExterno');
-
-externo.addEventListener('click', function() {
-    console.log('bubbling: externo');
-});
-
-interno.addEventListener('click', function() {
-    console.log('bubbling: interno');
-});
-
-botonExterno.addEventListener('click', function() {
-    console.log('bubbling: button');
-});
-
-externo.addEventListener('click', function() {
-    console.log('capturing: externo');
-}, true);
-
-// Ejercicio 5 - Validación de formulario
-const formulario = document.getElementById('formulario');
-const nombreInput = document.getElementById('nombre');
-const edadInput = document.getElementById('edad');
-const mensajeInput = document.getElementById('mensaje');
-const errorNombre = document.getElementById('errorNombre');
-const errorEdad = document.getElementById('errorEdad');
-const errorMensaje = document.getElementById('errorMensaje');
-const formResultado = document.getElementById('formResultado');
-
-function limpiarErrores() {
-    errorNombre.textContent = '';
-    errorEdad.textContent = '';
-    errorMensaje.textContent = '';
-    formResultado.textContent = '';
-}
-
-formulario.addEventListener('submit', function(event) {
-    event.preventDefault();
-    limpiarErrores();
-
-    let esValido = true;
-    const nombre = nombreInput.value.trim();
-    const edadValor = edadInput.value.trim();
-    const mensaje = mensajeInput.value.trim();
-
-    if (!nombre) {
-        errorNombre.textContent = 'El nombre no puede estar vacío.';
-        esValido = false;
-    }
-
-    if (!edadValor) {
-        errorEdad.textContent = 'La edad no puede estar vacía.';
-        esValido = false;
-    } else if (!/^[0-9]+$/.test(edadValor)) {
-        errorEdad.textContent = 'La edad debe ser un número entero positivo.';
-        esValido = false;
-    } else {
-        const edad = parseInt(edadValor, 10);
-        if (edad <= 0 || edad >= 120) {
-            errorEdad.textContent = 'La edad debe ser mayor que 0 y menor que 120.';
-            esValido = false;
-        }
-    }
-
-    if (!mensaje) {
-        errorMensaje.textContent = 'El mensaje no puede estar vacío.';
-        esValido = false;
-    }
-
-    if (esValido) {
-        formResultado.textContent = 'Formulario enviado con éxito.';
-        nombreInput.value = '';
-        edadInput.value = '';
-        mensajeInput.value = '';
-    }
-});

estilo.css

@@ -3,34 +3,3 @@ div {
     padding: 10px;
     margin: 10px;
 }
-
-.seleccionado {
-    background-color: #7DAA3C;
-    color: #fff;
-}
-
-#listaItems {
-    list-style: none;
-    padding: 0;
-}
-
-#listaItems li {
-    cursor: pointer;
-    padding: 5px;
-    margin: 4px 0;
-    border: 1px solid #8A8A8A;
-}
-
-.error {
-    color: #b30000;
-    font-size: 0.9em;
-    display: block;
-    margin-top: 4px;
-}
-
-.success {
-    color: #0a6f0a;
-    font-weight: bold;
-    margin-top: 10px;
-}
-

index.html

@@ -14,49 +14,19 @@
         </div>
         <hr>
         <div id="ejercicio-2">
-            <label for="campoTexto">Ingresa texto:</label>
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
-            <input type="text" id="campoTexto" />
-            <p id="contadorCaracteres">Caracteres ingresados: 0</p>
         </div>
         <hr>
         <div id="ejercicio-3">
-            <ul id="listaItems">
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
-                <li>Ítem 1</li>
-                <li>Ítem 2</li>
-                <li>Ítem 3</li>
-                <li>Ítem 4</li>
-                <li>Ítem 5</li>
-            </ul>
         </div>
         <hr>
         <div id="ejercicio-4">
-            <div id="externo">
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
-                <div id="interno">
-                    <button id="botonExterno">Click</button>
-                </div>
-            </div>
         </div>
         <hr>
         <div id="ejercicio-5">
-            <form id="formulario">
+            <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
-                <div>
-                    <label for="nombre">Nombre:</label>
-                    <input type="text" id="nombre" />
-                    <span class="error" id="errorNombre"></span>
-                </div>
-                <div>
-                    <label for="edad">Edad:</label>
-                    <input type="text" id="edad" />
-                    <span class="error" id="errorEdad"></span>
-                </div>
-                <div>
-                    <label for="mensaje">Mensaje:</label>
-                    <textarea id="mensaje"></textarea>
-                    <span class="error" id="errorMensaje"></span>
-                </div>
-                <button type="submit">Enviar</button>
-            </form>
-            <p class="success" id="formResultado"></p>
         </div>
         <script src="clase-9.js"></script>
     </body>