Unlock Security: OTP Generator with Email Verification using JavaScript

Hi there today we are diving into the  world of security ever wondered how to   implement an OTP generator with  email verification using HTML,   CSS and JavaScript it's all about  safeguarding your applications and   protecting your users data stay tuned as we  unlock the power of robust authentication. Let's have a quick demo right here here on the  screen we can see the OTP verification window   which has email address text box with next button  right now the next button is disabled because we   need to enter the email address once user enter  the valid email address here now we can able to   see the button is enabled automatically based  on the user input we enter the email address   and we can click next once we click this the  message will sending to your particular email   address and then text says here your one time  password has been send to this email address Here the user can cross check their email address  and then below text says enter the four digit code   we sent you via email to continue and then  below we have a four text box and then not   your email or did not receive the code and we  can try again once we click this it will send   back to the previous screen and again we can send  the OTP there and then verify button is disabled   here we need to enter the OTP here once we enter  enter the text and then button is enabled here once we click this now it is not valid now we  can able to see the error button shake to that   button so we need to enter the valid OTP so I  will jump to my email box so if I refresh now   we'll get the email here so here we have a text  and then OTP's 2624, 2624 and if I hit verify   now now we'll get the congratulation window  and then it was mentioned Welcome to the page   and then below thank you your OTP verification  has been completed successfully that's all for   the demo before beginning this video I would  like to introduce myself as Sharathchandar K if you find this tutorial useful please  subscribe to our Channel and watch this   video to motivate me let's level up our  Tech game together here on my desktop I   have already created a project folder name  called OTP generator and email verification   let me open this into a visual studio code  so for that I will drag this directory into   a visual studio code Visual Studio code will  automatically loads all the files inserted inside   the directory I have already created index.html  style.css and script.js in the index.html I have already added a HTML boiler plate with  the help of exclamation and then I have added   the title to OTP generator with email verification  by Sharathchandar K I have linked other two files   here inside the body I'm going to create the  container so for that in Visual Studio code we   have a Embed abbreviation to create a div with  class so for that I will type dot container if I hit enter it will automatically create  a div tag with the class attribute with the   value of container inside that I'm going to  add the H2 element here with H2 and then value   of OTP verification and then next to the this  I'm going to add the break here and then next   element of H4 and then I will add the text of  enter your email address and then again I will   add a break here I will add the paragraph tag  with the help of P inside that I will add the   text off you will receive an email with a onetime  password now let us see our HTML file in action   so for that in Visual Studio code we have a  extension called go live in the status bar once we click this it will automatically create  our live server into the default browser so here   we can able to see the title and then H2 tag of  OTP verification and then other text here below to   this we need to add the input box to get the user  email ID so for that I will go to the index.html   I will add one more div of class value of form  group so with the help of embed abbreviation   dot form group if we hit enter it will create a  div with class inside that I'm going to add the   input box input type as email if we it enter it  will create a input element with type of email I   will remove this name and then ID of email address  I will add the placeholder here with email address if I save if I go to the browser we can able to  see the input box here without refresh that is how   the live server will work next to this we need to  add the button to send an OTP email so for that I   will add the button with class of next button if I  hit enter it will create a button element with the   help of class attribute and then here we'll add  the next and then I will add the arrow Mark here if I save if I go to the browser now we  can able to see the next with the arrow   Mark so we need to style this so for that I  need to go to the style.css I have already   added a import URL of font family Poppins  and then I will add the * asterisk means   an wild card it will reset the margin  to 0 padding to 0 and then font family   as Poppins this is from the import URL and  then box sizing should be border box so now   I need to add the styles to the body with the  element selector name called body and then I   will set the background color to blue color  and then I will set the Min Height to 100vh I will set the display to flex this will help us  to set the container into the center of the screen   and then align item Center and then justify  content to be Center if I save if I go to the   browser now we can able to see the container  center of the screen now we have added the   styles to the body now we need to add the styles  to The Container so previously we have used the   element selector now we need to use the class  selector with the help of Dot and class value   of container I will set the background color  to white and then I will add the width of 400px I will set the Border radius to 5px and then  I will set the padding inner spacing should   be 25px and then I will add the text align to  Center if I save now we can able to see the   OTP verification box here and then I will  add the styles to the form group I will go   here same form group we need to use the dot  with class selector of value of form group I   will add the margin to 20px and then 0 I will  set that text align to start now I have added   the outside class to the input box I need to  add the styles to this also right so for that   same with form group with input of child for  the child I will set the height to 50px and   then width of 100 % font size 15px and then  padding 15px again and then border radius 5px outline to be none and then I will set the  Border to 1px solid with light gray color if   I save now we can able to see the input box here  with width of 100% now we need to add the styles   to the button so for that we we have a next  button or else we can add the button styles   to direct it to this with the help of element  selector button and then I will add the width   of 100% and then I will set the height to 45px  will set the cursor to pointer and then font size   to 16px and then background color to blue color  and then border radius to 30px I will reset the   Border to none and then I will set the color  of white I will add the margin bottom to 20px if I save now we can able to see the email box  and then button also so we need to add two more   container to this so again I will jump to  the index.html I will copy this container   I will paste it for two times if I save now  we can able to see the three container box   here we need to change the content to this  so for that I will mention this as step1,   step2 and step3 for that I will add the  class of step1 for that first container   and then second container as step2  and then third container as step3 So based on this class we need to enable  and disable this container again for the   second container as OTP verification  instead of enter your email address   we can say enter one time password and  then instead of this text I will inform   the user have onetime password has been  sent to this particular email address   for the email address I'm going to add the  span tag inside the span tag we are going   to append that particular email address so  for that I will add the id of verify email if I save now we can able to see the OTP  verification enter one time password here   it was break so I will remove this break  here and here we can able to see this   and then instead of email we need to get  the otps right so we need to add the input   box for this for that instead of form group I  will remove the form group I will add the OTP   form here with the help of div I will hit  and enter inside that I will add one more   paragraph tag says enter the four digit  code we sent you via email to continue if I save now we can able to see this and then  next to this this we'll add one more div of OTP   group if I it enter inside that we are going to  add the input box for four times because we are   going to set the four digit code right so for that  we have a option to create a input box to four   times so input with number and * of four if you  hit enter the embed abbreviation will create four   input box here how simple is this right so the ID  and name is irrelevant so I will remove this now if I save now we can able to see the four input  box here and then here instead of next we can set   the text as verify and then we'll add one more  paragraph tag to inform the user not your email   or did not receive the code We'll add the href  to try again if I save now we can able to see   the not your email or did not receive the code try  again once we click this it will navigate to this   previous screen here and we'll get the  password to this and then for the third   container we'll change this OTP verification to  congratulation and then we'll add the paragraph   tag here with welcome and I will paste that  celebrating icon here to homepage and then I   will remove all other element from here I will  add the image source inside the image folder   we'll have the image.png and then below to this  I will add one more h2 tag value of thank you I   will add one more paragraph tag here your OTP  verification has been completed successfully if I save now we can able to see the image as  well as the text so we need to add the styles   to this so again I will jump to the style.css in  the style.css first I will add the styles to this   OTP form with class value of OTP form because we  have added the Styles here for the first container   we need to add the second container here with  display to block and then margin to 20px right   and left and top and bottom to 0 and then I  will add the styles to this text with the help   of OTP form with child element of P we'll set the  margin to 20px and I will set the color to Green if I save now we can able to see the styles  to this this and then the next element of   OTP group we'll add the style to this  with OTP group so for the OTP group I   need to set all the text box into a single  liner so I will use this display flex with   the help of this will get all the text  box into a single liner with the help   of Gap 30px and then justify content to  be Center I will set the margin to 20px if I save now we can able to see the text box into  a single liner so I will add that same with OTP   group with the child of element selector input if  you add the styles to this it will be applicable   to all the inputs because we are adding the  styles to this OTP group of child input so   for this I will add the height of 50px and then  width of 50px I will add the padding inner spacing   5px and then font size to be 25px and then text  align to be Center I will remove the outline To   None border to none and then border bottom to  2px solid and then again same light gray color if I save now we can able to see the text box  here so here we can able to see the scroll button   right we need to disable this to so how we can  disable this so we have a option of input with   webkit of inner spin button and then again  with the help of input webkit of outer spin   button because these are the two buttons  this is for inner and outer spin buttons   we need to disable with web kit appearance  to be none and I will add the margin to 0 if I save if I go here if I hover to this  we can't able to see the buttons to this   input box and then I will add the styles  to the this image of image because we have   only one image here so directly I will set  the height of 150px and then Marin to 15px if I save if I maximize the screen we can  able to see the OTP verification with email   OTP verification with onetime password and then  congratulation so we need to do the functionality   to enable and disable these containers right  so for that we need to jump to the script.js   with the JavaScript we can achieve this so here  in the script.js we are going to declare the   Declaration so here with the help of const I  will add the Declaration to this step1 equal   to document document represent your web page if  you want to access any element in an HTML page   you always start with accessing the document  object so I will use the same with document   dot query selector the selection of dot with  step1 because this is a class so we need to   use the dot so I will add the same thing for  step2 and step3 I will copy here and I will   paste it for two time I will show the what  is this Const this so console. log of step1 if I save if I go here here in the console  we can able to get that particular div based   on the class this is how the Dom tree will work  so same for step2 if I save so here we can able   to see this with the hover of that element so we  need to do the other declaration with this const   and then next thing I will add the Declaration  of this particular email so we need to get this   email address right so here in the script.js email  address equal to document dot here we don't have   the class so we need to use the ID so we have one  more option called document dot get element by ID   and then I will use the ID value here and then  next thing I will add the Declaration to this   verify email because we are going to display that  email address to the second form right with the   help of same verify email ID and then we need to  get all the input box to this right so we have a   option to get all the inputs with document dot  query selector all so inside that OTP form and   then inside the OTP group we have the all inputs  so I will add a console dot log of this one inputs if I save if I go here now we can able to get all  the four node list if I hover you can able to see   the input box popped there and then next thing we  need to add this next button and verify button so   these both have same so I will change this class  value to verify now we have the two buttons one   is for next button so I will copy this class  again with next button equal to document dot   query selector of class value of dot with that  next button and then we have that verify button   I will copy this with document dot query selector  with the same of dot verify button that's all for   the Declaration once we load this project we  need to display only this first form right so   for that we need to add the event listener to  that window of onload window. add even listener   as I said we have a load option with that  function off I will made a alert here with 1 if I save if I go here if I refresh now we  can able to see the a alert of 1 whenever   the page is reloading we will get this a  alert of that event listener so here we   need to disable other two containers  with the help of class value so for   that I will add the step2 and step3 need  to disable step2 dot style dot display   equal to none so this will directly  set the styles to the step2 as none if I save if I go to the browser now we  can't able to see that second container   the same thing I will copy and paste it for  third container to if I save if I refresh now   only we can get that OTP verification of  container one so we need to disable this   button right so for that we'll have that next  button dot class list dot add of disabled and   then same thing I will copy and I will will  paste it for verify button to if I save now   it will be not disabled I will insert here see  now the disabled class is added to this we need   to add the styles to this again I will jump to  the style.css here in the style.css We'll add   the button dot disable I will add the opacity  to 0.6 so before that we need to change the   background color so here already it was light  color so I will set to dark color of 0099ff if I save now this is disabled so if opacity  is set if I remove if I save now we can able   to see the button color is different and I will  set the disable of button here and then pointer   event to none and then user select to none if I  save if I go here see now we can't able to get   that cursor pointer and then click event of user  pointer here this is what the same thing for the   step2 also so if I go here I will set this  display none so we can't able to click this   so the next thing once the email is valid we  need to remove this right so for that I will   create a return function with const validate  email with the parameter of email We'll add   the regex to validate the email so we have a  regex of this pattern to be set with S with   that email address they should present with @  and then they should present with DOT this are   the regex value here and then we can test this  so if regex dot test of email if this is passed   we need to remove the next button dot class list  dot remove of disable else will use the same I   will copy this and I will add the else here and  I will add the disable button here so here this   valid email we need to call right then only this  should be fire so for that again I will jump to   the index.html we are going to add the event of  on Keyup and then valid email of return function   here with we'll pass the this dot value this  contain this entire element and this dot value if I save if I go to the browser if I type test  @ gmail.com so still it is not enabled because   of this regex is wrong if I save if I go here  I will add the test here here I will remove the   debug pointer here Test @ gmail.com see if this  is valid now the button is enabled automatically   gmail.com these are the email pattern we have  followed to check the valid email or not so once   we click this we need to send the email to this  email ID right how we can do that so for that we   have a email service of email JS I will go to  the browser email JS so this was the service   provider with the help of this we need to send  the mail so we need to create the account first so I have already having the account you can sign  up here with this you can create an account and   we need to add the service first new service  here there are lot of service provider to send   an email so for now I will use the Gmail service  provider to connect that account so this Gmail   provider will send a 500 emails per day so with  the help of this service we need to connect to   the account so once we click this it will ask  us to connect to our account we can connect to   our account and we can click continue once we done  this it will create a service like this so this is   what the service and this is connected to this my  Gmail account with the help of this we are going   to send out a mail so and then the second thing we  need to create the email template so these are the   templates we will send to the email as a format so  the same as creating service we have a option to   to create a template for this so here you have a  Content what are the subject we need to place and   what are the content we need to pass and what is  the from name and to replay to whom and then from   name everything we need to describe here once we  have described here this is how the template will   look like this is what the template I have created  Dear Sir / Madam you got a new message from this   from name and here we are going to send an OTP  right so please use this following OTP password   to complete your login do not share this  OTP with anyone and this is the attachment   for now added for the example and then best  wishes with Sharathchandar K's team this is   what my email template with the help of this  we are going to send out the email so before   that we need to add the CDN to this email JS so  for that I will jump to the index.html in the   index.html header we need to add this CDN  link of email Js to get that email object if I save and again I need to go to script.js in  the script.js we need to initialize that service   so with the help of email JS once we add that CDN  then only this should be get so we'll in it and   then we'll get that service provider so I will go  to the email service and I will copy this service   name here I will get the service ID initialize it  if I save if I go to the browser in the console   if I add a email JS we'll get that email format  these are the email prototype we have for that CDN   with the help of this we need to send out a email  so once we click this we need to do that right so   again I will go to the visual studio code here  this is a next button right once we click that   next button we need to do that next button dot  even listener off click for the OTP generator   and verification for the mobile I have already  added a video and I have linked that into the   description please do check it out and then I will  add the function to this I will add the alert of 1 if I save if I go here if I type that email  address now this is enabled if I click now   we'll get the alert if I say okay if I remove if I  click it will not fire inside this we need to send   that email so again I will jump to the visual  studio code I will remove this alert and then   I will add the email js. send and then we need  to add the two more parameters here we need to   send the service ID as well as the template ID  so for that I will add two more const here with   service ID and template ID so and then above  I will create that const of service ID equal   to empty and then again one more const off  template ID equal to to null again I will go   to this email JS we need to add the public key  once we created a public key we'll get this so   this public key only we need to initialize into  this email. JS I will change here this is as a   public key to init and then I will go to the  email service this is what the email service   will be provider and I will add this as email  service and we need to send this template so I   will copy this template id here and I will will  paste it here so here you need to create which   template you need to send as a email you need to  copy that so I will copy this and here I need to   send the template parameter We'll add the then for  this with the function of response and then comma   function of error We'll add the console.log  here to check this of error and then response if I save I will add this as a Global variable  and again what is this template parameter we   need to create that right so I will create the  template parameter of let template parameter   so here in the template we have some particular  values so these are the values we need to pass   so for that we have the four parameters of from  name I will set now empty and then second one as   OTP I will set that to empty and then message  I will set that to empty and then last one   as replay to so here we can able to see this  will copy that and I will set that to empty so if I save I will go to the browser if I refresh  now I will add the email address test mail.com   if I it enter we'll get the error the recipient  address is empty because this replay to is not to   empty so we have the email already for this input  box add the Declaration on above email address dot   value if I save if I go to the browser I will  add the email address of mine sharathchandark@   gmail.com if I hit next now we'll get the status  code of 200 and then text off okay so if I go to   my mailbox now we can able to see the mail as  received these are the template time password   OTP confirmation this one and then OTP is missed  and then from name is missed because we have said   that value was empty so here in the email history  we can go here and we can check when to send and   for which device and it was sent so these are  the wonderful email service provider to check   all those things in a fingertip so now what I will  do I will add the from name here ofSharathchandar   K Dev community and then OTP will create and  then for the message I will type please find   out the attached file so this is for an example  how the attach file will sent with the message if I save if I go to the browser again I will add  the same email address of mine if I hit next we'll   get the status code of 200 I will go here this was  the previous mail if I go and refresh now we'll   receive the email address with Sharathchandar K  Dev community and then please find the attached   file so the text was wrong please find out the  attached file and this are the text we have passed   now the pending thing is we need to send the OTP  to this so again I can go in the email history   we can check this mail was correctly sent or not  and again here we can able to resend these things   so now we need to generate the OTP right so for  that we'll create one more method for OTP with   same return function of const generate OTP and  then inside that we'll return directly the OTP of   math. floor of 1,000 plus math do random of 9,000  so what is this so math dot random will Generate   random numbers between 0 to 9,000 so adding 1,000  to this random number the highest can only be 99   and 99 our max length of four is always insured  and preserved this is how the generated OTP will   be generated so I will add the console.log here to  check all the time it was generated as 4 digit if   I save if I go to the output see now we'll get the  OTP as 5131 if I refresh 5106 if I refresh it will   be get all the time four so instead of 1000 I will  remove this if I save if I go to the browser if I   refresh see sometimes we'll get digit of three  this is not a valid right we need to pass that   four digit so only I have added this 1,000 plus so  this will be sent all the times the value of four   so this OTP will be passed there if I remove this  we need to set this OTP to the parameter of this if I save if I go and add that email address  again if I send next now we'll get the response   of status 200 I will go to the mail box if  I refresh we'll get the mail and here we can   able to see the OTP and then all the text has  fulfilled so one time password confirmation and   then Dear Sir / Madam you got a new message  from Sharathchandar K's Dev Community please   use the following onetime password and then  this is the OTP to complete your login do   not share this OTP with anyone and these are  the small style added to check the attachment   file again I will go here if I refresh we can  able to see the how many mails we have sent   and then how many quote remaining per day this  is a very cool email provider to send an email   so for this generating OTP in that previous  project as I mentioned in the description   there we have generated differently so if you  have interested please do check it out I have   added in the description so once we click this  we need to change the container as well as the   text and we need to validate that right first I  will change the sending button to this so with   the help of next button dot inner HTML equal to  we'll add that symbol here to generating value   and then I I will add the text of sending and  then this should be reseted once the mail has   sent so I will go here inside this I will use the  same value I will copy this I will change this if I save if I go and add the email address so  if I click now we can able to see that sending   loading animation so once we send we need to send  back to that another screen right so again I will   jump to here and then I will add the Step1 dot  style dot display to None and then I will copy   this I will paste it for two times I will reset to  two and three for the second one instead of none I   can set these things to block third one as still  none if I save if I go here if I add that email   address if I hit next it is sending and we'll get  that OTP message how cool is this right so once we   entered this we need to enable the button right so  for that again I will jump to the script.js in the   script.js we need to add the key up for this for  all the inputs input dot foreach because in this   input we'll get the query selector all of input  so with the help of this for each We'll add the   add event listener to each of the input add event  listener of Keyup function of e inside the keyup   we need to allow only the one characters right so  for that I will go here in the step2 if I enable   we can able to type multiple values right so it  could be not allowed so we can able to restrict   only one characters to each text box so for that  only we have added this key up and then I will   get that this dot value do length greater than  equal to 1 then we need to remove that second   value so for that e dot Target dot value equal to  e dot Target dot value dot substring of 0 comma 1 so if I save if I go here if I enable this if  I type something of multiple values it will be   removed automatically so we can allow only one  character per input box once we entered all the   values it should be enabled right so for that  again in the key up we have the inputs array   of zero this contain this array of one and  then this is array of Two And this is array   of three array of 0 dot value not equal to  null and I will copy this for three times   because totally we have four input Box 2, 3 and  then 4 I will change the array value two here   this is two and this is three and then the  same thing I will do it if this is present   and then the else instead of next button I  will add the verify button here if all the   values not not equal to null we remove and  if any of the values is null we'll add this if I save if I go to the browser I will enable  this I will type 111 it will be take only one   and then I will tap to the next one tap to the  next one and I if I enter the last one now we   can able to see the verify is enabled how simple  is this right we can find the OTP and we need to   enter here and then once we click verify we need  to navigate to the next container right so I will   add that verify button add even listener with  click off function again and then inside that   we need to check this verification right how  we can get all the values from this input so   we'll create one let of values equal to null and  then we'll get all the values here with the help   of inputs dot for each and then I will add input  and then I will add all the values plus equal to   input dot value so here for this I will add the  console.log here to check input value if I save   I will go to the browser I will enable forth now I  will type 1 2 3 and 4 if I click on verify now we   can able to see all the console.log here inside  the foreach so if I change the value if I hit   verify again now we'll get 6577 so here it will  automatically appended to this value and then we   can able to check with that generated OTP right  how we can check that so here we have directly   assigned this generated OTP to this instead of  this we need to set a global variable so I will   add OTP of global variable and I will assign this  OTP to generate OTP and then I will pass this OTP   here with the help of this OTP we can verify it  here if OTP equal to values we need to jump to   the next container right so again I will copy  this and I will add else we need to show that   validation Shake error to this so how we can do  that I will add the class list to this class list   dot add we can say this error Shake I will jump  to the style.css We'll add the animation to this   with the help of error shake as I mentioned we are  going to add the animation of shake 0.2 second and   ease in and out for 0 second and two and what is  the shake the shake is an key frame so I will add   the key frame with the identity of shake I will  set the 0 % I will add for 4 0 to 25 and then 75   and then 100% for the 0% we'll set the margin  left to 0rem and then for 25% margin left to   0.5rem for 75 we'll set the margin left to minus  0.5rem and then for 100% again margin left to 0rem if I save because this should be 0 for margin  left for 0 and 0.5 minus and then 0 I will check   for now if I hit next it was sending email will  send to this particular email address if I type   the wrong one if I Hit verify only the first  time is happened because the class is already   added to this so we need to remove this so for  that again I will jump to the script.js we'll   set the set timeout for 1,000 millisecond and then  we'll remove this class if I save if I go to the   browser at mail.com if I hit next to a sending and  I will type 1 2 3 4 and if I hit verify now it was   shaking and again you can able to see the class  is adding after 1 second it was removed so only   we can able to see this frequently how simple  is this right so once we enter valid OTP what   will happen so I will jump to the mailbox I will  get that correct OTP here 126 and then 7 if I it   verify still it is not valid so here we have got  one more 6189 so the OTP is 6189 if I it verify   now still it is not valid why this OTP equal  to values so we can check we go to the source   and I will debug and I will check this if I hit  verify the OTP is 8945 but we have not get that so   we'll go and check this email history okay I will  refresh at gmail.com if I hit next it was sending   and here will get this I will go to the inbox if  the OTP is received 1962 if I hit verify nothing   is happened because we have set this second as  block instead of second we need to change these   things to third one right so I will set this none  and then this one as block if I save if I go here   if I type the email address if I hit next I will  go to the inbox in the inbox we get that 9091 if   I Hit verify now we'll get that congratulation  so here we have missed that animation to this   container so I will jump to the style.css I will  add the key frame of fade in show for this one I   will add the 0% and 100% from 0 to 100% the fade  in and out should be so I will set the opacity to   0 and then transform to scale of 0 for the  0% the scale should be 0 and then if it is   100% opacity should be 1 and then transform  to scale of 1 I have added this key frame I   need to Define this right so I will Define to this  container animation of fade in show for 0.3 second if I save if I go to the browser if I refresh  now we can able to get that animation effect on   that container so here for this try again once  we click this this should be navigate to here   right so for that in the script.js will create a  function function is a block of code to perform   a particular task with the help of function  keyword I will add the change my email and   then I will use this steps and I will change  this first one as block and then other two is   none we have created a function we have not yet  initialized it right so we need to initialize   it so I will jump to the index.html in the try  again I will add directly with on click equal   to that function name and then initialize  if I save if I go here again with my email   ID if I hit next it will be sending if I try  again we'll get the first container again so   now once we refresh will get that animation  with that OTP verification I will add that   email address sharathchandar k@ gmail.com if I  it we'll get that sending animation and we'll   get that popover animation I will add some random  text and then the verify button is enabled if we   click this the OTP is wrong so I will jump to  the email box I have send the email here with   a value of 6903 if I Hit verify now we'll  get that congratulations message with your   OTP verification has been completed successfully  finally we have completed this OTP generator with   verification email using HTML CSS and JavaScript  I hope this video will be helpful for you please   like and share this video and also subscribe to  my channel Sharathchandar K to watch more like   this one if you are interested in JavaScript  projects like this I have already created and   added a playlist Link in the description please  do check it out thank you so much for watching

Channel: Sharathchandar K

Views: 1,990

Keywords: otp verification in javascript, OTP ui design, otp verification, otp generator, otp generator in javascript, hot to make a otp generator with javascript, javascript otp verification form, generate one-time password (otp) with javascript, javascript otp generation, otp verification html css, otp, javascript for beginners, learn javascript, beginner javascript tutorial, generate otp using javascript, how to generate otp in javascript, otp in js, otp verification javascript, html, js

Id: htzSEZh2WzA

Length: 43min 59sec (2639 seconds)

Published: Sat Apr 13 2024