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 =
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:
Recommended Articles