How to create an OTP Verification Pin Layout using HTML, CSS & JS

Hello folks, I have been tasked to build an OTP verification Page and found it a little challenging because the Internet doesn’t have enough resources.
That’s why I thought to write a blog about it.

Here is a demo of what we are going to build.👇

DEMO

The HTML

Here is a graphical representation of our HTML structure.

The HTML code of the above structure.

If you need to implement a 6 code OTP then simply add two more input tags in the input div.

The CSS

CSS has always been the difficult part but let me make it easy for you.

We have a Section here with a display flex and alignment center which let us align every child inside this section in the center.

Next, we have 4 input fields. They are nothing but 32x32 squares with a border-bottom

All the applied CSS is shown below.

The Javascript

In JS, we need to add functionality to the input fields.
We will create a function to add an event listener to each input.

We need to listen for the “keyup” event.
As soon as the key is released this event will fire up.

we need to get the input value and check if it is an Integer. If not then simply empty the input field.
If the input is an integer and within the range of (0–9) then we get the next sibling of this input and move our focus on it.

Reverse logic will be applied on Backspace. We will get the previous sibling and move our focus on it.

Lastly, Get all input fields and attach the listener to them.

Here is the complete working Demo on Codepen

That's a wrap!

I appreciate you taking out time and reading this; please share it with your friends and family if you found it helpful, click on the follow button to support me.

Let’s connect on Twitter. I’d love to know my audience more and build a community :)

Let me know your takeaways and other topics you would like me to write about in the comment section — I am eager to see what you have to say.

I hope this helps you, and have a nice day!