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