6. The DOM

[hchocobar]

Check List

• [x] Intro
• [x] The DOM
• [x] Time to Code
  • [x] Eventos que lanzan funciones
• [x] Practice:
  • [x] Eventos
  • [x] Manipular el DOM

Intro

• Lecturas:
  • FrontEnd
  • DOM
  • Programación Orientada a Eventos
• Practices:
  • Eventos
  • Manipulación del DOM

The DOM - Document Object Model

• [x] Árbol del DOM
• [x] Raíz (root), nodos (con atributos y eventos)
• [x] Propiedades del Inspector
• [x] Programación Orientada a Eventos

Time to Code

• Template: html-hello
• Con ejemplos anteriores
  • [x] onClick (register)
  • [x] onClick (view)
  • [x] onSubmit (is_login)

Practices

• [x] Eventos
• [x] Manipular el DOM

[hchocobar]

[hchocobar]

[hchocobar]

[hchocobar]

  <h1 class="text-center text-primary mt-2">Event Handlers</h1>
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="col-10 col-sm-8 col-md-7 col-lg-6">
        <form>
          <div class="form mb-3">
            <label for="inputEmail">Email address</label>
            <div class="input-group">
              <input type="email" class="form-control" id="inputEmail" placeholder="name@domain.com">
            </div>
          </div>
          <div class="form">
            <label for="inputPassword">Password</label>
            <div class="input-group">
              <input type="password" class="form-control" id="inputPassword" placeholder="password">
              <div id="view" onclick="handleView()" class="input-group-text text-light bg-success">
                <i class="fa-solid fa-eye"></i>
                <i class="fa-solid fa-eye-slash"></i>
              </div>
            </div>
          </div>
          <div class="mt-4">
            <button type="submit" class="btn btn-warning">Ingresar</button>
            <button type="button" class="btn btn-secondary">Registrarme</button>
            <button type="reset" class="btn btn-outline-secondary">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>  

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