API tools faq
paste
ucielsola

DOM + Eventos + Form + LocalStorage

ucielsola
Apr 7th, 2022 (edited)
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>Document</title>
  8.     </head>
  9.     <style>
  10.         html {
  11.             font-size: 20px;
  12.             font-family: "Courier New", Courier, monospace;
  13.         }
  14.  
  15.         body {
  16.             display: flex;
  17.             align-items: center;
  18.             justify-content: space-evenly;
  19.             min-height: 100vh;
  20.             margin: 0;
  21.             padding: 0;
  22.             background-color: lightslategray;
  23.         }
  24.  
  25.         form {
  26.             display: flex;
  27.             flex-direction: column;
  28.         }
  29.  
  30.         label {
  31.             margin-block: 0.25rem;
  32.         }
  33.         input {
  34.             display: block;
  35.             padding-block: 0.5rem;
  36.             font-size: 1rem;
  37.             border-radius: 3px;
  38.             border: none;
  39.             outline: none;
  40.         }
  41.  
  42.         button,
  43.         .button {
  44.             cursor: pointer;
  45.             padding-block: 0.5rem;
  46.             font-size: 1rem;
  47.             border-radius: 3px;
  48.             border: 1px solid rgba(255, 255, 255, 0.331);
  49.             background-color: rgb(206 255 255);
  50.         }
  51.  
  52.         button:active,
  53.         .button:active {
  54.             background-color: rgb(143, 179, 179);
  55.         }
  56.     </style>
  57.  
  58.     <body>
  59.         <form>
  60.             <label for="nombre">
  61.                 Nombre
  62.                 <input type="text" name="nombre" />
  63.             </label>
  64.             <label for="apellido">
  65.                 Apellido
  66.                 <input type="text" name="apellido" />
  67.             </label>
  68.             <label for="submit">
  69.                 <input class="button" type="submit" value="Enviar" />
  70.             </label>
  71.         </form>
  72.         <div class="container">
  73.             <button id="verGuardados">Ver guardados</button>
  74.             <ul id="lista"></ul>
  75.         </div>
  76.     </body>
  77.  
  78.     <script defer>
  79.         // creo las variables, accediendo a los elementos HTML
  80.         const form = document.querySelector("form");
  81.         const botonLista = document.querySelector("#verGuardados");
  82.         const listaHTML = document.querySelector("#lista");
  83.  
  84.         // creo un array vacio para guardar los objetos usuario
  85.         const listaUsuarios = [];
  86.  
  87.         // agrego un escuchador de eventos para el evento
  88.         // SUBMIT (enviar) del formulario
  89.  
  90.         form.addEventListener("submit", (e) => {
  91.             // prevengo el comportamiento por defecto (recarga la página)
  92.             e.preventDefault();
  93.  
  94.             // accedo a los valores de los input al momento de hacer submit
  95.             const nombre = e.target[0].value;
  96.             const apellido = e.target[1].value;
  97.  
  98.             if (!nombre || !apellido) return alert("Datos no válidos");
  99.  
  100.             // ejecuto la funcion que guarda los usuarios
  101.             guardarUsuario({ nombreUsuario: nombre, apellidoUsuario: apellido });
  102.  
  103.             // reinicio el formulario
  104.             form.reset();
  105.         });
  106.  
  107.         // agrego un escuchador de eventos para el evento
  108.         // CLICK del boton. Le paso la funcion que quiero que ejecute (sin parentesis)
  109.         botonLista.addEventListener("click", recuperarUsuarios);
  110.  
  111.         // se prepara para recibir "algo" a traves de su parámetro
  112.         function guardarUsuario(usuario) {
  113.             // guardamos en array lo que la funcion reciba por parámetro
  114.             listaUsuarios.push(usuario);
  115.  
  116.             // guardamos en localStorage el array luego de actualizarlo (agregar el nuevo usuario)
  117.             // con JSON.stringify estamos convirtiendo el array a formato JSON
  118.             localStorage.setItem("usuarios", JSON.stringify(listaUsuarios));
  119.         }
  120.  
  121.         function recuperarUsuarios() {
  122.             // recupera de localStorage el elemento "usuarios"
  123.             // parseando el JSON y convirtiendo de nuevo array
  124.             const listaRecuperada = JSON.parse(localStorage.getItem("usuarios"));
  125.  
  126.             // para evitar items repetidos, primero vaciamos la lista
  127.             listaHTML.innerHTML = "";
  128.  
  129.             // aplicamos metodo forEach (para cada uno de los elementos de un array)
  130.             listaRecuperada.forEach((user) => {
  131.                 // creamos nodo HTML LI
  132.                 const li = document.createElement("li");
  133.                 // le ponemos como contenido los datos del usuario
  134.                 li.textContent = `${user.nombreUsuario} ${user.apellidoUsuario}`;
  135.                 // agregamos el LI creado a la lista UL del HTML
  136.                 listaHTML.appendChild(li);
  137.             });
  138.         }
  139.     </script>
  140. </html>
  141.  
  142.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!