Last active
July 29, 2024 09:17
-
-
Save geekboots-team/c02541600f1b40934ab446af284f7d39 to your computer and use it in GitHub Desktop.
How to generate 6 digit OTP and verify using JavaScript only
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>OTP System</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <style> | |
| :root { | |
| --bg: #212121; | |
| --gray: #333; | |
| --lightGray: #424242; | |
| --red: #f73614; | |
| --green: #06c200; | |
| --white: #fff; | |
| --ash: #868686; | |
| } | |
| * { | |
| font-family: "Roboto", sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg); | |
| } | |
| section { | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| section aside { | |
| width: 550px; | |
| text-align: center; | |
| } | |
| section aside button { | |
| cursor: pointer; | |
| background-color: var(--green); | |
| color: var(--white); | |
| border: none; | |
| padding: 6px 15px; | |
| font-size: 20px; | |
| border-radius: 5px; | |
| } | |
| section aside button:disabled { | |
| background-color: var(--lightGray); | |
| color: var(--ash); | |
| } | |
| #otp { | |
| margin: 25px 0; | |
| height: 30px; | |
| font-size: 25px; | |
| color: var(--white); | |
| } | |
| #otpInput { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| #otpInput input { | |
| padding: 10px; | |
| text-align: center; | |
| font-size: 30px; | |
| border-radius: 8px; | |
| border: 2px solid transparent; | |
| width: 20px; | |
| outline: none; | |
| background-color: var(--gray); | |
| color: var(--white); | |
| } | |
| #otpInput input:focus { | |
| border-color: var(--green); | |
| color: var(--green); | |
| } | |
| #otpInput input:disabled { | |
| background-color: var(--lightGray); | |
| color: var(--ash); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <aside> | |
| <button id="genBtn" onclick="generateOTP()">Generate OTP</button> | |
| <div id="otp"></div> | |
| <div id="otpInput"> | |
| <input type="text" maxlength="1" /> | |
| <input type="text" maxlength="1" /> | |
| <input type="text" maxlength="1" /> | |
| <input type="text" maxlength="1" /> | |
| <input type="text" maxlength="1" /> | |
| <input type="text" maxlength="1" /> | |
| </div> | |
| </aside> | |
| </section> | |
| <script> | |
| let otp = ""; | |
| const btn = document.getElementById("genBtn"); | |
| const otpView = document.getElementById("otp"); | |
| const inputs = document.querySelectorAll("#otpInput input"); | |
| function generateOTP() { | |
| btn.disabled = true; | |
| otp = Math.floor(Math.random() * (999999 - 100000) + 100000).toString(); | |
| otpView.innerText = otp; | |
| } | |
| function clear($event) { | |
| $event.target.value = ""; | |
| } | |
| function checkNumber(number) { | |
| return /[0-9]/g.test(number); | |
| } | |
| function typeOTP($event) { | |
| const input = $event.target; | |
| const value = input.value; | |
| const fldIndex = +input.dataset.index; | |
| if ($event.key === "Backspace" && fldIndex > 0) { | |
| input.previousElementSibling.focus(); | |
| } | |
| if (checkNumber(value)) { | |
| if (value.length > 0 && fldIndex < inputs.length - 1) { | |
| input.nextElementSibling.focus(); | |
| } | |
| if (input.value !== "" && fldIndex === inputs.length - 1) { | |
| submit(); | |
| } | |
| } else { | |
| clear($event); | |
| } | |
| } | |
| function pasteOTP($event) { | |
| const data = $event.clipboardData.getData("text"); | |
| const value = data.replace(/ /g, "").split(""); | |
| if (value.length === inputs.length) { | |
| inputs.forEach((input, index) => { | |
| input.value = value[index]; | |
| }); | |
| submit(); | |
| } | |
| } | |
| function submit() { | |
| let fullOtp = ""; | |
| inputs.forEach((input) => { | |
| fullOtp += input.value; | |
| input.disabled = true; | |
| }); | |
| const timeOut = setTimeout(function () { | |
| if (otp == fullOtp) { | |
| otpView.innerText = "You are verified!"; | |
| } else { | |
| otpView.innerText = "Invalid OTP!"; | |
| } | |
| inputs.forEach((input) => { | |
| input.value = ""; | |
| input.disabled = false; | |
| }); | |
| btn.disabled = false; | |
| }, 1000); | |
| } | |
| inputs.forEach((input, index) => { | |
| input.dataset.index = index; | |
| input.addEventListener("focus", clear); | |
| input.addEventListener("keydown", clear); | |
| input.addEventListener("keyup", typeOTP); | |
| input.addEventListener("paste", pasteOTP); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment