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 *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>