JavaScript Application For Random Number Generator (original) (raw)

Last Updated : 18 Mar, 2026

A random number generator is a simple yet practical JavaScript project that introduces core programming concepts. It helps you understand user input handling, random value generation, and dynamic UI updates.

• Generates random numbers within a specified range.
• Handles user input for minimum and maximum values.
• Updates the interface dynamically to display results.

Approach

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

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 `

`

• 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);

`

• 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 `