In today's digital era, One-Time Passwords (OTPs) have become indispensable for user authentication. Whether it's for verifying email registrations or securing financial transactions, OTPs play a crucial role in safeguarding user data. While this blog post focuses on the frontend aspects, we will not go into backend functionality.
This blog post guides you on creation of a JavaScript function that generates 4-digit, 6-digit, and custom-length OTPs with just a click of a button. Additionally, we'll explore the generation of alphanumeric values using JavaScript.
You’ll learn in this blog post how to:
- Generate OTP Numbers.
- Generate random numbers.
- Generate alphanumeric number.
JavaScript Functions used.
- Math.floor() : Round the number down.
- Math.random(): Generate random number between 0 and 1. including 0 but not including 1.
- For loop : Use to run code many times.
Generate Random OTP Numbers.
Generate Random OTPs.
Let’s generate 4-digit random numbers for OTP.
So, we going to run for loop 4 times and generate random number from 0 to 10 digits and store one by one inside a HTML element.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate OTP Numbers | maketechstuff.com</title>
</head>
<body>
<div class="box">
<div class="otp"></div>
<button type="button">Generate OTP</button>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.otp {
font-size: 30px;
margin: 15px;
}
button {
font-size: 30px;
font-weight: bold;
padding: 10px 30px;
border-radius: 5px;
border: none;
background-color: blue;
color: #fff;
cursor: pointer;
display: block;
transition: 0.3s;
}
button:active {
transform: scale(0.9);
}
JavaScript
let otp = document.querySelector(".otp");
let button = document.querySelector("button");
button.onclick = function () {
otp.innerHTML = "";
for (let i = 0; i < 4; i++) {
// Generating random numbers between 0 to 10.
let random_number = Math.floor(Math.random() * 10);
otp.innerHTML += random_number;
}
}
Output:
If you want to generate 6-digit number or more or less number, than just replace i < 4 to i < 6 in for loop. Like wise you can generate custom length numbers (OTP).
Generate Random OTP Numbers From Your Declared Values.
You can also generate OTP or random values from your given values.
To achieve this, you can declare a variable with your stored value and run a for loop. Within the loop, generate a random number that will serve as an index value for your variable values. Then, retrieve the character from the variable at the randomly generated index.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate OTP Numbers | maketechstuff.com</title>
</head>
<body>
<div class="box">
<div class="otp"></div>
<button type="button">Generate OTP</button>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.otp {
font-size: 30px;
margin: 15px;
}
button {
font-size: 30px;
font-weight: bold;
padding: 10px 30px;
border-radius: 5px;
border: none;
background-color: blue;
color: #fff;
cursor: pointer;
display: block;
transition: 0.3s;
}
button:active {
transform: scale(0.9);
}
JavaScript
let otp = document.querySelector(".otp");
let button = document.querySelector("button");
let string = "123456789";
button.onclick = function () {
otp.innerHTML = "";
for (let i = 0; i < 6; i++) {
otp.innerHTML += string[Math.floor(Math.random() * string.length)];
}
}
Output:
You can increase or decreased OTP length by the changing the time a for loop run. Here I have run for loop 6 times. (Just change the limit of for loop).
This is just a numeric value. You can also generate alpha numeric value Just by adding alphabets and number in a string.
Generate Random Alpha Numberic Values.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate OTP Numbers | maketechstuff.com</title>
</head>
<body>
<div class="box">
<div class="otp"></div>
<button type="button">Generate OTP</button>
</div>
</body>
</html>
HTML
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.otp {
font-size: 30px;
margin: 15px;
}
button {
font-size: 30px;
font-weight: bold;
padding: 10px 30px;
border-radius: 5px;
border: none;
background-color: blue;
color: #fff;
cursor: pointer;
display: block;
transition: 0.3s;
}
button:active {
transform: scale(0.9);
}
HTML
let otp = document.querySelector(".otp");
let button = document.querySelector("button");
let string = "123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
button.onclick = function () {
otp.innerHTML = "";
for (let i = 0; i < 6; i++) {
otp.innerHTML += string[Math.floor(Math.random() * string.length)];
}
}
Output:
So that’s it. This blog post has provided a comprehensive frontend guide to generating OTPs and alphanumeric values using JavaScript on click of button. If you have any query or suggestion, feel free to ask in comment section.
Thanks for reading this far.
You may like:
- How to create a OTP input form using HTML CSS and JavaScript.
- How to generate the random values from your selected values using JavaScript.
- How to create a random captcha generator using JavaScript.
- How to create random password generator using JavaScript with copy the generated password functionality.
- How to create a random number using JavaScript.
Share your thoughts.