Practica manipulación del DOM con Js Vanilla y ejercicios 😎 (Parte 2)

#webdev #javascript #html #css

Introducción

Volvemos con las 2da parte de practicar JS vanilla con ejercicios, en esta ocasión subiendo un poco mas el nivel y con ejemplo un poco mas interactivos.

Te dejo la primera parte si quieres estudiarlo:

Practica manipulación del DOM con Js Vanilla y ejercicios 😎

Cristian Fernando ・ Apr 14

#javascript #html #css #webdev

Comenzamos! 😌

Este será el documento HTML con algunos estilos básicos sobre el que trabajaremos en el presente post:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Práctica DOM</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header id="header">
        <h1 id="main-title">Manipulación del DOM</h1>
        <nav>
            <ul id="menu">
                <li><a href="#section1">Sección 1</a></li>
                <li><a href="#section2">Sección 2</a></li>
                <li><a href="#section3">Sección 3</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="section1">
            <h2>Sección 1</h2>
            <p class="text">Este es un párrafo en la sección 1.</p>
            <button id="btn-change-text">Cambiar texto</button>
        </section>

        <section id="section2">
            <h2>Sección 2</h2>
            <ul id="item-list">
                <li>Elemento 1</li>
                <li>Elemento 2</li>
                <li>Elemento 3</li>
            </ul>
            <button id="btn-add-item">Añadir elemento</button>
        </section>

        <section id="section3">
            <h2>Sección 3</h2>
            <form id="user-form">
                <label for="name">Nombre:</label>
                <input type="text" id="name" placeholder="Ingresa tu nombre">
                <button type="submit">Enviar</button>
            </form>
            <p id="form-output"></p>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 - Práctica DOM</p>
    </footer>

    <script src="script.js"></script>
</body>

</html>

Y el CSS:

/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

main {
  padding: 1rem;
}

section {
  margin-bottom: 2rem;
}

button {
  padding: 0.5rem 1rem;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

footer {
  text-align: center;
  padding: 1rem;
  background-color: #f4f4f4;
  margin-top: 2rem;
}

.highlight {
  text-transform: uppercase;
}

Preguntas

Son 10 preguntas:

Preguntas sobre Manipulación del DOM

Cambio de texto:

Escribe una función que cambie el texto del párrafo con la clase text cuando se haga clic en el botón con el ID btn-change-text.
Añadir elementos:

Implementa una función que añada un nuevo <li> con el texto "Elemento X" (donde X es el número de elementos actuales + 1) al hacer clic en el botón con el ID btn-add-item.
Manejo de eventos de formulario:

Haz que el formulario con el ID user-form muestre el nombre ingresado en el campo de texto dentro del párrafo con el ID form-output al enviar el formulario.
Estilos dinámicos:

Cambia el color de fondo del encabezado (<header>) cuando el usuario pase el mouse sobre él. Restaura el color original cuando el mouse salga.
Eliminar elementos:

Agrega un botón "Eliminar" junto a cada elemento de la lista (<li>). Al hacer clic en este botón, elimina el elemento correspondiente.
Clases dinámicas:

Crea una función que alterne la clase highlight en el título principal (#main-title) cuando se haga doble clic sobre él. La clase highlight debe tener un estilo personalizado en tu archivo CSS.
Iteración de nodos:

Escribe una función que recorra todos los elementos <li> de la lista y muestre su contenido en la consola.
Creación dinámica de elementos:

Crea un botón que, al ser presionado, genere un nuevo párrafo con el texto "Nuevo párrafo" y lo inserte al final de la sección con el ID section1.
Manipulación de atributos:

Cambia el atributo href de los enlaces del menú (<a>) para que apunten a https://ejemplo.com al cargar la página.
Eventos delegados:

Implementa un sistema de eventos delegados para detectar clics en cualquier elemento de la lista (<li>). Muestra en la consola el texto del elemento clicado.

Intenta resolver los problemas por tu cuenta y luego compara tus respuestas con las mías que te dejo a continuación.

Respuestas

En esta ocasión te presento las respuestas en un jsfiddle:

Conclusión

Tener curiosidad sobre como funcionan las herramientas que manejas a diario es una habilidad super importante para cualquier desarrollador de software. No te quedes solo con lo que hace React, Angular o Vue por ti, aprender a entender como funcionan las cosas nativamente. A la larga es algo que vale completamente la pena.

Otros post de mi autoría que te pueden interesar: