OTP (One-Time Password) generator and validator built using Tailwind CSS and JavaScript allows users to generate a random OTP and validate it against the entered OTP. The application has a user-friendly interface for generating and validating OTPs using JavaScript for interactivity and Tailwind CSS for styling.
Approach to create OTP Generator and Validator
- Integrate the Tailwind CSS via CDN Link in your HTML code. Use different HTML elements to structure the web page and style them using different Tailwind utilities.
- The JavaScript code at the bottom of the page adds functionality to the buttons. When the “Generate OTP” button is clicked, it generates a random OTP consisting of 6 characters (a mix of uppercase letters, lowercase letters, and numbers) and displays it in the OTP box.
- It also enables the “Validate OTP” button and clears any previous status message.
- When the “Validate OTP” button is clicked, it checks if the entered OTP matches the generated OTP.
- Depending on the result, it updates the status message accordingly and applies the appropriate text color (green for valid OTP, red for invalid OTP).
Example: Implementation of Designing an OTP Generator and Validator in Tailwind CSS and JavaScript
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 and Validator</ title >
< link href =
rel = "stylesheet" >
</ head >
< body class="bg-gray-100 flex justify-center
items-center h-screen">
< div class="max-w-md mx-auto p-8 bg-white
shadow-md rounded-lg border-2
border-green-400">
< h1 class = "text-2xl font-semibold mb-5" >
OTP Generator | Validator
</ h1 >
< button id = "generate-otp"
class="px-4 py-2 bg-blue-500 text-white
rounded-md hover:bg-blue-600
focus:outline-none">
Generate OTP
</ button >
< div id = "otp-box"
class="hidden mt-4 bg-white border-2
border-gray-300 rounded-md p-4">
</ div >
< input id = "user-input" type = "text"
class="mt-4 block w-full border-2
border-green-300 rounded-md
shadow-sm focus:ring-indigo-500
focus:border-indigo-500"
placeholder = "Enter OTP" >
< button id = "validate-otp"
class="mt-4 px-4 py-2 bg-blue-500
text-white rounded-md
hover:bg-blue-600
focus:outline-none"
disabled>
Validate OTP
</ button >
< div id = "otp-status"
class="mt-4 text-sm
text-gray-500">
</ div >
</ div >
< script >
const generateOTPButton = document.getElementById('generate-otp');
const otpBox = document.getElementById('otp-box');
const userInput = document.getElementById('user-input');
const validateOTPButton = document.getElementById('validate-otp');
const otpStatus = document.getElementById('otp-status');
generateOTPButton.addEventListener('click', () => {
let generatedOtp = '';
const characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (let i = 0; i < 6 ; i++) {
generatedOtp += characters.charAt(Math
.floor(Math.random() * characters.length));
}
otpBox.textContent = generatedOtp ;
otpBox.classList.remove('hidden');
validateOTPButton.disabled = false ;
otpStatus.textContent = '' ;
});
validateOTPButton.addEventListener('click', () => {
const enteredOTP = userInput.value;
const generatedOTP = otpBox.textContent;
if (!enteredOTP) {
otpStatus.textContent = 'Please enter OTP';
} else if (enteredOTP === generatedOTP) {
otpStatus.textContent = 'Valid OTP';
otpStatus.classList.remove('text-red-500');
otpStatus.classList.add('text-green-500');
} else {
otpStatus.textContent = 'Invalid OTP';
otpStatus.classList.remove('text-green-500');
otpStatus.classList.add('text-red-500');
}
});
</ script >
</ body >
</ html >
|
Output:
Recommended Articles