How To Create a Random Number Generator Using Javascript
In this Javascript tutorial, we will learn how to create a js code that generates random numbers within a given range.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Random Number Generator</title>
<style>
*{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.container{ width: 50%; margin: 0 auto; text-align: center; }
input[type="number"]{ width: 50%; padding: 12px 20px; margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc; border-radius: 4px;
}
button{ width: 100%; padding: 14px 20px; margin: 8px 0; border: none;
border-radius: 4px; background-color: #4caf50; color: #fff;
cursor: pointer; font-weight: bold;
}
#result{ font-size: 2em; width: 100%; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<form>
<label for="min">Minimum Value:</label>
<input type="number" id="min">
<br>
<label for="max">Maximum Value:</label>
<input type="number" id="max">
<br>
<button type="button" id="generate-btn">Generate Random Number</button>
<br>
<input type="text" id="result" readonly>
</form>
</div>
<script>
// This script selects the HTML elements by their IDs and stores them in variables.
const generateBtn = document.getElementById("generate-btn");
const minValue = document.getElementById("min");
const maxValue = document.getElementById("max");
const result = document.getElementById("result");
// This function is executed when the generateBtn button is clicked.
generateBtn.addEventListener("click", function(){
// The min and max values are extracted from the input fields
// and converted to integers.
let min = parseInt(minValue.value);
let max = parseInt(maxValue.value);
// If the minimum value is greater than the maximum value,
// an alert is displayed and the function returns without generating a number.
if(min > max){
alert("Minimum value must be less than maximum value");
return;
}
// A random number between the minimum and maximum values (inclusive)
// is generated using the Math.floor and Math.random functions.
let randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
// The generated random number is displayed in the result field.
result.value = randomNum;
});
</script>
</body>
</html>
Code Explanation:
This JavaScript code performs the following actions:
1 - Element Selection: The script selects specific HTML elements using their respective IDs and stores them in variables. These elements include:
* generateBtn: Represents the button triggering the number generation.
* minValue: Represents the input field for the minimum value.
* maxValue: Represents the input field for the maximum value.
* result: Represents the output field where the generated number will be displayed.
2 - Event Listener: An event listener is attached to the generateBtn button, triggering the execution of the function whenever the button is clicked.
3 - Validation: The script checks if the minimum value is greater than the maximum value. If this condition is true, an alert is displayed informing the user that the minimum value must be less than the maximum value. The function then returns, preventing the generation of a number.
4 - Random Number Generation: If the minimum and maximum values are valid, the script proceeds to generate a random number between the provided range.
It uses the Math.floor() and Math.random() functions to generate a random decimal number between 0 and 1 (exclusive).
This decimal number is then multiplied by the difference between the maximum and minimum values and then rounded down using Math.floor(). The minimum value is added to the result to ensure the generated number falls within the desired range.
5 - Displaying the Result: Finally, the generated random number is assigned to the value property of the result field, which causes it to be displayed to the user.
OUTPUT:
