JavaScript Application For Random Number Generator

Last Updated : 06 Jan, 2025

Creating a random number generator is a fun and practical project for beginners in JavaScript. It helps you learn how to handle user inputs, generate random values within a range, and dynamically update the user interface.

What We’re Going to Create

We’ll build a user-friendly application that allows users to:

Enter a minimum and maximum range for generating random numbers.
Generate a random number within the specified range.
Reset the inputs and results to start fresh.

The application will have a clean interface and intuitive controls, making it easy for anyone to use.

Project Preview

djnd — JavaScript Application For Random Number Generator

Random Number Generator - HTML and CSS

The HTML code creates the structure for a Random Number Generator web application, including input fields for the minimum and maximum range, a button to generate the number, and a button to reset the inputs. It also displays the generated random number dynamically on the page and the CSS Styles the generate button, reset button and the result displaying area.

HTML

<html>
<head>
  <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300vh;
    background-color: #f2f2f2;
}

.container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
    width: 300px;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.input-section {
    margin-bottom: 20px;
}

input[type="number"] {
    padding: 8px;
    margin: 10px 5px;
    width: 80px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}

button:active {
    background-color: #3e8e41;
}

#randomNumber {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
    color: #333;
}

#reset {
    background-color: #f44336;
    margin-top: 10px;
}

#reset:hover {
    background-color: #e53935;
}
  </style>
</head>
<body>
    <div class="container">
        <h1>Random Number Generator</h1>
        <div class="input-section">
            <label for="min">Minimum:</label>
            <input type="number" id="min" value="1">
            <label for="max">Maximum:</label>
            <input type="number" id="max" value="100">
        </div>
        <button id="generate">Generate Random Number</button>
        <div class="result">
            <p id="randomNumber">Click the button to  generate</p>
        </div>
        <button id="reset">Reset</button>
    </div>
</body>
</html>

In this example

The container centers the app and styles the layout with a clean, minimal design.
The input fields allow users to specify the range (minimum and maximum numbers).
The buttons provide functionality to generate a random number or reset the form.
Styling includes hover and active effects to make the UI interactive and user-friendly.

Random Number Generator - JavaScript Logic

The JavaScript code powers the functionality of the Random Number Generator by handling user input, generating random numbers within the specified range, and updating the result display. It also provides a reset feature to clear inputs and the displayed number.

JavaScript

const min = document.getElementById('min');
const max = document.getElementById('max');
const genBtn = document.getElementById('generate');
const resetBtn = document.getElementById('reset');
const randNumDisplay = document.getElementById('randomNumber');

function genRandNum() {
    const minVal = parseInt(min.value);
    const maxVal = parseInt(max.value);

    if (isNaN(minVal) || isNaN(maxVal) || minVal >= maxVal) {
        alert("Please enter valid minimum and maximum values.");
        return;
    }

    const randNum = Math.floor(Math.random() * (maxVal - minVal + 1)) + minVal;
    randNumDisplay.textContent = randNum;
}

function reset() {
    min.value = 1;
    max.value = 100;
    randNumDisplay.textContent = "Click the button to generate";
}

genBtn.addEventListener('click', genRandNum);
resetBtn.addEventListener('click', reset);

In this example

Variables like min, max, genBtn, resetBtn, and randNumDisplay are used to reference specific HTML elements.
The genRandNum() function fetches user input, validates the range, generates a random number, and updates the display dynamically.
The reset() function restores default values for inputs and resets the display text.
Event listeners connect the buttons to their respective functions for generating or resetting the random number.

Complete code

HTML

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300vh;
            background-color: #f2f2f2;
        }

        .container {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            text-align: center;
            width: 300px;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .input-section {
            margin-bottom: 20px;
        }

        input[type="number"] {
            padding: 8px;
            margin: 10px 5px;
            width: 80px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            padding: 10px 20px;
            margin-top: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #45a049;
        }

        button:active {
            background-color: #3e8e41;
        }

        #randomNumber {
            font-size: 24px;
            font-weight: bold;
            margin: 20px 0;
            color: #333;
        }

        #reset {
            background-color: #f44336;
            margin-top: 10px;
        }

        #reset:hover {
            background-color: #e53935;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Random Number Generator</h1>
        <div class="input-section">
            <label for="min">Minimum:</label>
            <input type="number" id="min" value="1">
            <label for="max">Maximum:</label>
            <input type="number" id="max" value="100">
        </div>
        <button id="generate">Generate Random Number</button>
        <div class="result">
            <p id="randomNumber">Click the button to  generate</p>
        </div>
        <button id="reset">Reset</button>
    </div>

    <script>
       // Select DOM elements
const min = document.getElementById('min');
const max = document.getElementById('max');
const genBtn = document.getElementById('generate');
const resetBtn = document.getElementById('reset');
const randNumDisplay = document.getElementById('randomNumber');

// Function to generate a random number
function genRandNum() {
    const minVal = parseInt(min.value);
    const maxVal = parseInt(max.value);

    // Validate inputs
    if (isNaN(minVal) || isNaN(maxVal) || minVal >= maxVal) {
        alert("Please enter valid minimum and maximum values.");
        return;
    }

    // Generate a random number within the range
    const randNum = Math.floor(Math.random() * (maxVal - minVal + 1)) + minVal;
    randNumDisplay.textContent = randNum;
}

// Reset the inputs and result
function reset() {
    min.value = 1;
    max.value = 100;
    randNumDisplay.textContent = "Click the button to generate";
}

// Event listeners
genBtn.addEventListener('click', genRandNum);
resetBtn.addEventListener('click', reset);

    </script>
</body>
</html>

Generate random alpha-numeric string in JavaScript

pranjalonj7

Improve

Article Tags :

JavaScript Application For Random Number Generator

What We’re Going to Create

Project Preview

Random Number Generator - HTML and CSS

Random Number Generator - JavaScript Logic

Complete code

Similar Reads

Thank You!

What kind of Experience do you want to share?