Responsive page using vue

@immdipu it's really true!

To UX, this clear button could make a great difference! Thank you for the tip! 💫

@UmerAsad2077 How are you? 😉

I added an id to each input and a listener as well that is called every time any key is pressed (key up).

The verification does:

• Check the size of the input value when a key is released;
• if the size of the input is equal 2, then I focus the next input

For example (I did it in Vue, ok?! JS vanilla or react isn't much different):

the code bellow, represents my day and month input, with the id="day" and id="month", respectively

 <input :class="{error: dayError}" id="day" type="text" pattern="\d*" placeholder="DD" maxlength="2" v-model="day" @keyup="checkDaySize">
 <input :class="{error: monthError}" id="month" type="text" placeholder="MM" maxlength="2" v-model="month" @keyup="checkMonthSize">

every time I click the verification is called, and then, the logic does:

• not allow insert any key that isn't a number;
• remove error, if any; and finally
• check if the day value length is equal 2, and then focuses the next input (in this case, the input with id="month", else does nothing

 const checkDaySize = () => {
    day.value = day.value.replace(/\D/g, '')
    day.value.length >= 1 ? dayError.value = '' : '' 
    day.value.length  == 2 ? document.getElementById('month').focus() : ''
  }

I don't know if I could explain myself well 😅! But if you have any doubts yet, just tell me and I try to say another way ☺️

@felipestefani i really appreciate that you took the time to reply, this was extremely helpful 👍