Guía 07

Guía 07

DAWM / Proyecto02

Objetivo general

Proponer código de scripting para el manejo de la interfaz del cliente mediante el desarrollo de una landing page funcional y atractiva utilizando una plantilla de Bootstrap para la adecuación a los requerimientos específicos.

Actividades en clases

  1. Clone localmente tu repositorio landing.
  2. Siga las instrucciones de Gemini, y:
    • Cree la carpeta con js y agregue el archivo de código externo ‘main.js’.
    • Agregue la referencia con la ruta al archivo de código externo en el archivo index.html.
  3. Abra su proyecto con VSCode y utilice el Live Server para identificar los cambios.
  4. (STOP 1) Compruebe el resultado en el navegador.

Ciclo de vida de una página HTML

  1. Edite el archivo de código externo js/main.js.

  2. Defina las funciones flecha ready y loaded, con:

     let ready = () => {
     console.log('DOM está listo')
     debugger
 }

 let loaded = () => {
     debugger
     console.log('Iframes e Images cargadas')
 }
  3. Agregue:
    • El objeto window con el método addEventListener, del API, para relacionar el evento DOMContentLoaded con la función ready.
    • El objeto window con el método addEventListener para relacionar el evento load con la función loaded.
     let ready = () => { ... }
 let loaded = () => { ... }

 window.addEventListener("DOMContentLoaded", ready);
 window.addEventListener("load", loaded)
  4. (STOP 2) Compruebe el resultado en el navegador. Habilite el inspector y recargue la página.

Document API

  1. Elimine los puntos de interrupción debugger.

  2. Identifique el elemento <form> con id form en el documento index.html.

     <form id="form" class="d-flex flex-wrap gap-2">
   <input type="text" name="email" 
          placeholder="Your Email Addresss" 
          class="form-control form-control-lg">
   <button class="btn btn-dark btn-lg text-uppercase w-100">Sign Up</button>
 </form>

    formulario

  3. Escriba o genere el código:

    Asigne a la variable myform la referencia al elemento HTML a partir del objeto document con el método getElementById. El formulario tiene id 'form'.
    
 Agregue un punto de interrupción.
 
     let loaded = () => {

   //Coloque aquí el código

 }
    Haga click aquí para ver la solución
     
    
     let loaded = () => {

       let myform = document.getElementById('form');
       debugger;

     }
  4. (STOP 3) Compruebe el resultado en el navegador. Habilite el inspector y recargue la página.

Evento submit

  1. Elimine los puntos de interrupción debugger.

  2. Escriba o genere el código:

    Use la variable myform mediante con el método addEventListener para relacionar el evento submit con un callback (incluya el parámetro eventSubmit).
    
 Dentro del callback, use el parámetro eventSubmit para evitar el comportamiento por defecto del formulario.
    
 Agregue un punto de interrupción.
 
     let loaded = () => {

   let myform = document.getElementById('form');

   //Coloque aquí el código

 }
    Haga click aquí para ver la solución
     
    
     let loaded = ( eventLoaded ) => {

       let myform = document.getElementById('form');
          
       myform.addEventListener('submit', (eventSubmit) => {
           eventSubmit.preventDefault(); 
           debugger;
       })

     }
  3. (STOP 4) Compruebe el resultado en el navegador. Habilite el inspector y recargue la página.

Validación de campos

  1. Elimine los puntos de interrupción debugger.

  2. Escriba o genere el código:

    Asigne a la variable emailElement la referencia al elemento HTML a partir del objeto document con el método querySelector. El elemento tiene la clase 'form-control-lg'.
    
 Asigne a la variable emailText a partir del objeto emailElement con la propiedad value.
    
 Use la variable emailText mediante la propiedad length para verificar la longitud. En caso que la longitud sea igual que 0, use la variable emailElement mediante con el método focus para llevar el enfoque al elemento.
    Y, agregue un return.
 
     let loaded = () => {

   let myform = document.getElementById('form');
      
   myform.addEventListener('submit', (eventSubmit) => {
       eventSubmit.preventDefault(); 
          
       //Coloque aquí el código

   })

 }
    Haga click aquí para ver la solución
     
    
     let loaded = ( eventLoaded ) => {

       let myform = document.getElementById('form');
          
       myform.addEventListener('submit', (eventSubmit) => {
           eventSubmit.preventDefault(); 
              
           const emailElement = document.querySelector('.form-control-lg');
           const emailText = emailElement.value;

           if (emailText.length === 0) {
             emailElement.focus()
           }
       })

     }
  3. (STOP 5) Compruebe el resultado en el navegador.

Animate API

  1. Revise la documentación de Web Animations API Concepts y Web Animation API

  2. Escriba o genere el código:

    Además de llevar el enfoque al elemento emailElement: Use el Animate API para que elemento emailElement se mueva de 0 a 50px y de -50px a 0, con una duración de 400 milisegundos.
    Haga click aquí para ver la solución
     
    
     emailElement.animate(
         [
             { transform: "translateX(0)" },
             { transform: "translateX(50px)" },
             { transform: "translateX(-50px)" },
             { transform: "translateX(0)" }
         ],
         {
             duration: 400,
             easing: "linear",
         }
     )
  3. (STOP 6) Compruebe el resultado en el navegador.

Documentación

Fundamental

Términos

Javascript, función flecha, API, console, debugger, window, evento, document, propiedad, función.

Referencias