Build a Random Number Generator in Tailwind CSS

Last Updated : 05 Mar, 2024

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.

Screenshot-2024-02-26-224537

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>