Introduction:
In the realm of web development, user authentication is a crucial aspect of ensuring the security of online services. One common method of authentication is through One-Time Passwords (OTPs), which add an extra layer of security by providing a unique code that expires after a short period. In this tutorial, we’ll walk through the process of creating a simple OTP generator using HTML, CSS, and JavaScript.
Things You Will Learn:
By the end of this tutorial, you will have gained insights into the following:
- Generating Random OTPs: Learn how to create a function that generates a random six-digit OTP.
- Event Handling in JavaScript: Understand how to handle events in JavaScript to trigger the OTP generation.
- DOM Manipulation: Explore the Document Object Model (DOM) and learn how to dynamically update the content of HTML elements.
Video Tutorial:
I would suggest you to watch the video below for a better understanding of how we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ”OTP Generator”. Within this folder we have 3 files. These files are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OTP Generator</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>OTP Generator</h1>
<button id="generateBtn">Generate OTP</button>
<p id="otpDisplay"></p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1b76f2;
}
.container {
background-color: #1a1820;
width: min(37.5em, 90%);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 0.5em;
}
h1 {
text-align: center;
font-weight: 500;
color: #ffffff;
}
button {
font-size: 1em;
background-color: #1b76f2;
display: block;
margin: 2em auto;
padding: 1em;
color: #ffffff;
border: none;
outline: none;
border-radius: 0.3em;
cursor: pointer;
}
#otpDisplay {
font-size: 1em;
background-color: #2a292e;
color: #ffffff;
letter-spacing: 1em;
text-align: center;
padding: 1em 0;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
let generateOTP = () => {
//Define the length of the OTP
const otpLength = 6;
// Generate a random numeric OTP with exactly 6 digits
const otp = Math.floor(100000 + Math.random() * 900000);
//Display the generated OTP
document.getElementById("otpDisplay").innerText = `${otp}`;
};
document.getElementById("generateBtn").addEventListener("click", generateOTP);
window.addEventListener("load", generateOTP);
Conclusion:
Congratulations! You’ve just created a simple OTP generator using HTML, CSS, and JavaScript. This tutorial covered the basics of generating random OTPs, handling events in JavaScript, and dynamically updating the DOM. Feel free to customize and expand upon this project to integrate it into your authentication systems or explore more advanced features. Happy coding!
