Creating an OTP (One-Time Password) page is an essential part of the registration and login process for many websites and applications. In this article, we will discuss how to create an OTP page using Bootstrap and JavaScript.
Bootstrap is a popular front-end framework that provides a set of CSS and JavaScript components that can be used to create responsive and visually appealing web pages. It also includes a grid system that allows you to create a layout that adapts to different screen sizes.
JavaScript, on the other hand, is a programming language that can be used to add interactivity to web pages. In this case, we will use JavaScript to validate the OTP input and handle the resend function.
To get started, you will need to include the Bootstrap CSS and JavaScript files in your HTML file. You can do this by adding the following code to the head section of your HTML file:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>OTP Input</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> | |
| <style> | |
| *{ | |
| margin:0px; | |
| padding:0px; | |
| } | |
| html{ | |
| scroll-behavior: smooth; | |
| background-color: rgba(122, 240, 255,0.8); | |
| } | |
| section{ | |
| background-color: rgba(122, 240, 255,0.8); | |
| } | |
| .otp-input{ | |
| border:none; | |
| border-bottom:2px solid transparent; | |
| border-radius: 0px; | |
| font-size: 1.1rem; | |
| padding: 5px; | |
| outline:none!important; | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| input:active, | |
| input:focus | |
| { | |
| outline:0px !important; | |
| box-shadow: none !important; | |
| border-bottom:2px solid red !important; | |
| outline:none!important; | |
| } | |
| /* Chrome, Safari, Edge, Opera */ | |
| input::-webkit-outer-spin-button, | |
| input::-webkit-inner-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| /* Firefox */ | |
| input[type=number] { | |
| -moz-appearance: textfield; | |
| } | |
| #OTP_Div{ | |
| display: grid; | |
| grid-template-columns: repeat(5, 20%); | |
| grid-gap: 10px; | |
| padding: 5%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section id="OTP_Section" class="container-fluid text-center" style="margin-top: 10%"> | |
| <div class="container text-center col-lg-3 col-sm-12 col-md-3 bg-white rounded-lg shadow-lg p-3"> | |
| <div class="alert alert-danger" role="alert" style="display: none" id='alert_box'> | |
| All fields are required! | |
| </div> | |
| <div id="OTP_Div" class="col-lg-10 col-sm-12 col-md-10" > | |
| <input style="background-color: rgba(122, 240, 255,0.1);" autofocus class="form-control otp-input" onkeyup="alter_box(this.id)" maxlength="1" required type="number" id="o1" /> | |
| <input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o2" onkeyup="alter_box(this.id)" /> | |
| <input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o3" onkeyup="alter_box(this.id)" /> | |
| <input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o4" onkeyup="alter_box(this.id)" /> | |
| <input style="background-color: rgba(122, 240, 255,0.1);" class="form-control otp-input" required maxlength="1" type="number" id="o5" onkeyup="alter_box(this.id)" /> | |
| </div> | |
| <div class="container text-center"> | |
| <button class="btn border-info text-primary bg-white rounded-lg" onclick="verifyOTP()">Verify</button> | |
| </div> | |
| </div> | |
| </section> | |
| <script type="text/javascript"> | |
| function alter_box(id){ | |
| var id_num = parseInt(id.split('')[1]); | |
| var key = event.keyCode || event.charCode; | |
| if (key === 8 || key === 46) { | |
| if(id_num != 1){ | |
| var prev = 'o'+(id_num-1).toString(); | |
| console.log(id_num, prev); | |
| document.getElementById(prev).focus(); | |
| } | |
| }else{ | |
| var id_num = parseInt(id.split('')[1]); | |
| if(id_num!=5){ | |
| var next = 'o'+(id_num+1).toString(); | |
| document.getElementById(next).focus(); | |
| } | |
| } | |
| } | |
| function verifyOTP(){ | |
| var o1=document.getElementById('o1').value; | |
| var o2=document.getElementById('o2').value; | |
| var o3=document.getElementById('o3').value; | |
| var o4=document.getElementById('o4').value; | |
| var o5=document.getElementById('o5').value; | |
| var alert_box = document.getElementById('alert_box'); | |
| if(o1!="" && o2!="" && o3!="" && o4!="" && o5!=""){ | |
| var otp = parseInt(o1+o2+o3+o4+o5); | |
| alert_box.style.display = 'none'; | |
| alert(otp); | |
| }else{ | |
| alert_box.style.display = 'block'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
In this article, we have shown how to create an OTP page using Bootstrap and JavaScript. By following the steps outlined in this article, you can create a responsive and visually appealing OTP page that is easy to use and navigate.
No comments:
Post a Comment