Geek Logbook

Tech sea log book

50projectsIn50days – Day 8: Form Input Wave

Email and Email are into the label element as we can see here:

      <form>
        <div class="form-control">
          <input type="text" required />
          <label> Email</label>
        </div>
        <div class="form-control">
          <input type="password" required />
          <label> Password</label>
        </div>
      </form>

This label will be added in a node list as consequence of the following line of code in the Javascript Script:

const labels = document.querySelectorAll('.form-control label')

After that the inline style add a transition delay as we can see there:

labels.forEach(label => {
    label.innerHTML = label.innerText
            .split('')
            .map((letter, idx) => `<span style="transition-delay:${idx*50}ms">${letter}</span>`)
            .join('')
})

You can see the code in this GitHub Repository: 08.form_wave and the demo of the project is here: Form Input Wave

Leave a Reply

Your email address will not be published. Required fields are marked *.