Simple OTP Generator with HTML, CSS, and JavaScript

In the realm of web development, creating a secure and efficient One-Time Password (OTP) generator is a valuable skill. Today, let’s dive into building a straightforward OTP generator using HTML, CSS, and JavaScript. No need to be a coding expert – we’ll guide you through the process with simple words and clear explanations.

Unlocking the Secrets: HTML Structure

Our HTML sets the stage for our OTP generator. Let’s explore the structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OTP Generator</title>
  </head>
  <body>
    <div class="otp-container">
      <h1 class="otp-title">OTP Generator</h1>
      <button class="otp-button" id="generateBtn">Generate OTP</button>
      <p class="otp-display" id="otpDisplay"></p>
    </div>
  </body>
</html>

HTML

Adding Style: CSS Magic

Our CSS brings a touch of style to our OTP generator. Let’s delve into the styling:

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
}
body {
  background-color: #1b76f2;
}
.otp-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;
}
.otp-title {
  text-align: center;
  font-weight: 500;
  color: #ffffff;
}
.otp-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;
}
.otp-display {
  font-size: 1em;
  background-color: #2a292e;
  color: #ffffff;
  letter-spacing: 1em;
  text-align: center;
  padding: 1em 0;
}

CSS

Demystifying the Styles

OTP Container:
- Positioned at the center of the screen with a stylish background color.
- Designed for optimal width, padding, and border radius.
Title:
- Center-aligned text with a bold font, ensuring clarity and visibility.
Button:
- Stylish button for OTP generation, with a vibrant color scheme.
Display:
- A visually appealing display for presenting the generated OTP.

Breathing Life into the Generator: JavaScript Magic

Our JavaScript adds the magic to our OTP generator. Let’s unravel the code:

let generateOTP = () => {
  const otpLength = 6;
  const otp = Math.floor(100000 + Math.random() * 900000);
  document.getElementById("otpDisplay").innerText = `${otp}`;
};
document
  .getElementById("generateBtn")
  .addEventListener("click", generateOTP);
window.addEventListener("load", generateOTP);

JavaScript

Understanding the Magic

OTP Generation Function:
- Generates a random six-digit OTP.
- Updates the display with the generated OTP.
Event Listeners:
- Triggers OTP generation on button click and page load.

Trying it Out

Clicking the Button:
- Press the “Generate OTP” button to witness the magic.
Page Load:
- Experience the automatic OTP generation on page load.

Conclusion: Share the Secure Joy!

Congratulations! You’ve just built a simple and secure OTP generator. Whether you’re implementing this in a login system or practicing your coding skills, this guide empowers you to create robust and user-friendly features.

Happy Coding!