🔐 OTP Generator Using HTML, CSS & JavaScript | Complete Project with Source Code

Alizeh Codes July 02, 2025

 Are you just starting your web development journey? Want to build a simple but useful mini project using JavaScript? Then this OTP Generator is a perfect choice! 💡

In this post, you'll learn how to create a random OTP generator using HTML, CSS, and JavaScript. We'll also look at the complete source code, explain how it works, and give ideas to improve it further.


📺 Watch Project Demo

Below is the live preview of the OTP generator in action.



🎯 Perfect for JavaScript beginners and frontend learners.


💡 What is an OTP Generator?

OTP (One-Time Password) is a temporary numeric code usually used for verifying identity in login or sign-up forms.

In this project:

The user clicks a button 
A random 6-digit OTP is generated
It’s displayed in a clean UI
No backend needed. 
All logic is in the frontend using JavaScript.


🛠️ Technologies Used

HTML – For creating the structure
CSS – To style the interface
JavaScript – For the logic and interactivity

💻 Source Code

You can copy the full source code below and try it yourself!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTP Generator</title>
    <!-- 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:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    background-color: #9163cb;
}
.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: #9163cb;
    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;
}


JavaScript:

let generateOTP = () => {
    //Define the length of 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);

🚀 What You’ll Learn

Generating random numbers in JavaScript
Basic CSS styling and layout
How to build a practical, real-world feature

 


🧠 Bonus Ideas

You can take this project further by adding:

Copy to clipboard functionality
Dark mode toggle
A timer that refreshes the OTP after 30 seconds
Backend integration (like Firebase) for real-time use

 


🙌 Final Thoughts

This OTP Generator is a great beginner JavaScript project. It’s small, easy to build, and teaches you practical frontend skills.

👉 If you liked this project, make sure to check out more tutorials on my YouTube channel!


Tags:

Post a Comment

0 Comments