OTP Generator and Validator Card using JavaScript & Tailwind CSS Last Updated : 07 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 ValidatorIntegrate 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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" 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: Output Comment More infoAdvertise with us Next Article Factorial Calculator Card using Tailwind CSS and JavaScript S subramanyasmgm Follow Improve Article Tags : JavaScript Similar Reads Factorial Calculator Card using Tailwind CSS and JavaScript The Factorial Calculator is a web application designed to calculate the factorial of a non-negative integer entered by the user and instantly compute its factorial upon a button click. If the user wants to start over, they can utilize the "Clear" button. Its design and user-friendly features ensure 3 min read How to Create Virtual Whiteboard using JavaScript and Tailwind ? The Whiteboard project aims to create a collaborative digital whiteboard application using the Tailwind CSS framework. This web application will allow users to draw, write, and collaborate in real time providing a virtual space for brainstorming, presentations, and creative collaboration.Output Prev 5 min read EMI Calculator Card using Tailwind CSS and JavaScript An EMI (Equated Monthly Installment) calculator helps users determine the monthly payment amount towards a loan including both the principal amount and the interest. This project will demonstrate how to create a simple yet effective financial tool using the Tailwind CSS framework. Approach to create 3 min read How to Create Event Management Card using JavaScript and Tailwind CSS ? An event management website is a platform designed to help users plan, organize, and promote events. It typically includes features such as event scheduling, ticket sales, attendee registration, and venue management. Building such a website with the Tailwind CSS can result in a sleek and modern user 4 min read Current Ratio Calculator Card using Tailwind CSS & JavaScript A Current Ratio Calculator is a web-based tool that allows users to calculate the current ratio of a company. The current ratio is a financial metric that measures a company's ability to pay its short-term liabilities with its short-term assets. It is calculated by dividing the company's current ass 3 min read LCM & GCD Calculator Card using Tailwind CSS & JavaScript The LCM and GCD Calculator is a web application that allows users to calculate the Least Common Multiple (LCM) and Greatest Common Divisor (GCD) of the two numbers. Users input two numbers and the application computes and displays their LCM and GCD. Approach to create LCM & GCD Calculator CardCr 3 min read Like