Manipulación del DOM

Instrucciones

Sigue las instrucciones y crea componentes web utilizando JavaScript, manipulando el DOM, escuchando eventos e implementando persistencia con localStorage.

Crea un 'Tooltip'

Un Tooltip es un pequeño cuadro de información que aparece cuando pasas el cursor sobre un elemento en una interfaz gráfica de usuario. Este cuadro ofrece detalles adicionales sobre la función del elemento, proporcionando así una ayuda contextual. Por ejemplo, si pasas el cursor sobre un botón que guarda cambios en una aplicación, un Tooltip podría aparecer con el texto "Guardar", para clarificar qué hace ese botón. Los Tooltips son útiles para mejorar la experiencia del usuario, ya que proporcionan orientación sin requerir que se desplace a otra sección para obtener más información.

Requerimiento

Tu tarea es crear un Tooltip, un pequeño elemento emergente que proporciona información adicional cuando el usuario pasa el cursor sobre un elemento. Utilizarás JavaScript para manipular el DOM y crear este componente.

Elemento Objetivo: El elemento sobre el cual aparecerá el Tooltip será cualquier elemento que tenga un atributo `data-tooltip` definido.
Contenido del Tooltip: El valor del atributo será el mensaje que aparecerá en el Tooltip. Por ejemplo, un elemento con el atributo `data-tooltip="Grabar"` mostrará el texto "Grabar" como contenido del Tooltip.
Posicionamiento: El Tooltip debe aparecer encima del elemento objetivo.
Estilo: Sigue el diseño especificado en Figma para dar estilo al Tooltip
Interacción: El Tooltip debe mostrarse cuando el usuario pase el cursor sobre el elemento objetivo y desaparecer cuando el cursor se mueva fuera del elemento. Pero no lo debe hacer inmediato. El mouse debe mantenerse por encima del elemento objetivo durante 300ms para luego mostrar el Tooltip. Si el cursor sale del elemento objetivo antes de cumplirse los 300ms, el Tooltip no debe mostrarse.

Demo

A continuación, presenta una demostración del Tooltip.


  <button data-tooltip="¡Funciona! 😄">Tooltip</button>

Crea un Formulario con Validación en tiempo real

El objetivo de este ejercicio es crear un formulario HTML que realice validaciones en tiempo real utilizando JavaScript, persista el progreso usando localStorage y procese el envío usando JavaScript para mostrar un mensaje con la respuesta del servidor.

Requerimientos

Campos del formulario:

Nombre: Un input obligatorio
Apodo: Un input obligatorio de entre 3 y 10 caracteres. Solo debe aceptar caracteres alfanuméricos. Estos son letras (a-z) o (A-Z), dígitos (0-9).
Biografía: Textarea opcional, pero si se llena, deberá tener mínimo 100 caracteres.
Contraseña: Un input obligatorio de mínimo 8 caracteres, al menos una letra mayúscula y un número.

Validación en Tiempo Real

Valida el contenido de cada campo inmediatamente cuando el usuario comienza a escribir en él.
Muestra un mensaje de error debajo del campo cuando no pasa la validación.
El mensaje de error debe desaparecer cuando el campo sea válido.

Persistencia

Guarda el progreso del usuario en el `localStorage` cada vez que se valide un campo (no queremos guardar datos inválidos)
Al recargar la página, el formulario debe recuperar el estado guardado del `localStorage`.
El campo Contraseña contiene datos sensibles por lo tanto no debe almacenarse en `localStorage`

Envío del Formulario

El botón para enviar el formulario debe estar deshabilitado hasta que todos los campos sean válidos.
Al hacer clic en enviar, simula una petición al servidor utilizando JavaScript. El método debe ser POST, la URL será el servicio echo 'https://mocktarget.apigee.net/echo'. Deberá tener el header Content-Type adecuado.
Luego de procesar la respuesta, añade un elemento debajo del formulario que muestre la respuesta del servidor en formato JSON.

Demo

A continuación, presenta una demostración del Formulario con validación.


  const user = document.querySelector('#name');
  const nickname = document.querySelector("#nickname");
  const biography = document.querySelector("#biography");
  const password = document.querySelector("#password");

  const requiredName = document.querySelector("#required-name");
  const nicknameError = document.querySelector("#nickname-error");
  const biographyError = document.querySelector("#biography-error");
  const passwordError = document.querySelector("#password-error");

  function buttonValidation() {
    const userValid = user.validity.valid;
    const nicknameValid = nickname.validity.valid;
    const biographyValid = biography.value.length >= 100;
    const passwordValid = password.validity.valid;

    document.querySelector("#button").disabled = 
    !((userValid && nicknameValid && biographyValid) && passwordValid);
  }

  user.addEventListener('input', function() {
    if (!user.validity.valid) {
        requiredName.textContent = 'El campo nombre es obligatorio';
    } else {
      requiredName.textContent = '';
    }
  buttonValidation();
  });

  nickname.addEventListener("input", function () {
    if (!nickname.validity.valid) {
        nicknameError.textContent = "Entre 3 y 10 caracteres alfanuméricos";
    } else {
      nicknameError.textContent = "";
    }
    buttonValidation();
  });

  biography.addEventListener("input", function () {
    if (biography.value.length < 100) {
        biographyError.textContent = "Mínimo 100 caracteres";
    } else {
      biographyError.textContent = "";
    }
    buttonValidation();
  });

  password.addEventListener("input", function () {
    if (!password.validity.valid) {
      if (password.validity.tooShort) {
          passwordError.textContent = "Mínimo 8 caracteres";
        } else if (password.validity.patternMismatch) {
            passwordError.textContent = 
            "Debe contener al menos una letra mayúscula y un número";
        }
    } else {
      passwordError.textContent = "";
    }
    buttonValidation();
  });