Build a Random Number Generator in Tailwind CSS
A Random Number Generator (RNG) is a tool that generates a random number within a specified range. By combining Tailwind CSS’s utility classes with JavaScript, you can create a simple and visually appealing RNG that can be easily integrated into any web application.
Approach:
- Create an HTML file and include the necessary Tailwind CSS CDN link in the head section. Define the main container for the app using Tailwind CSS classes to style it.
- Inside the main container, create two input fields for the user to enter the minimum and maximum values for the random number generation. Add two buttons: one for generating the random number and another for clearing the input fields.
- Attach event listeners to the generate and clear buttons using JavaScript.
- When the generate button is clicked, get the values from the input fields, parse them as integers, and generate a random number within the specified range. Display the random number in the result div. If the input is invalid (e.g., non-numeric values), display an error message.
- When the clear button is clicked, clear the input fields and the result display.
Example: Implementation to design a number generator.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Random Number Generator</ title > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel = "stylesheet" > </ head > < body class="bg-gray-100 flex items-center justify-center h-screen"> < div class="bg-white p-8 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/3 border-2 border-green-600"> < h1 class = "text-3xl font-bold text-center mb-8" > Random Number Generator </ h1 > < div class = "flex justify-center items-center mb-4" > < input type = "number" id = "min" class="mr-4 w-20 px-4 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder = "Min" > < input type = "number" id = "max" class="mr-4 w-20 px-4 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder = "Max" > < button id = "generate" class="bg-blue-500 text-white px-6 py-2 rounded-md focus:outline-none"> Generate </ button > < button id = "clear" class="bg-red-500 text-white px-6 py-2 ml-4 rounded-md focus:outline-none"> Clear </ button > </ div > < div id = "result" class = "text-center text-2xl font-bold" > </ div > </ div > < script > document.getElementById('generate') .addEventListener('click', function () { const min = parseInt(document.getElementById('min').value); const max = parseInt(document.getElementById('max').value); if (isNaN(min) || isNaN(max)) { document.getElementById('result') .textContent = "Invalid input"; return; } const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; document.getElementById('result').textContent = `Random Number: ${randomNumber}`; }); document.getElementById('clear') .addEventListener('click', function () { document.getElementById('min').value = ''; document.getElementById('max').value = ''; document.getElementById('result').textContent = ''; }); </ script > </ body > </ html > |
Output: