Introduction
JavaScript is a versatile language that allows developers to create dynamic and interactive web applications. One common task is generating random numbers, which can be used in various applications such as games, simulations, and random data generation. In this guide, we will create a simple random number generator using JavaScript and explain the code step by step.
Random Number Generator Using JavaScript
Main Description
To create a random number generator, we need to set up a basic HTML structure and use JavaScript to generate and display the random numbers. Below is the code and its explanation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random number generator using JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: linear-gradient(to right, #cafbff, #1cffe8);
background-color: #7afff0;
}
.container {
text-align: center;
}
button {
padding: 12px 22px;
font-size: 25px;
cursor: pointer;
border-top-left-radius: 15px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #e600ff;
color: white;
}
p {
font-size: 22px;
}
</style>
</head>
<body>
<div class="container">
<h1>Random Number Generator</h1>
<p>Click the button to generate a random number between 1 and 9999</p>
<button id="Btn">Generate</button>
<p id="result"></p>
</div>
<script>
document.getElementById('Btn').addEventListener('click', function() {
const min = 1;
const max = 9999;
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
document.getElementById('result').innerText = `Random Number: ${randomNumber}`;
});
</script>
</body>
</html>
Code Explanation
- HTML Structure: The HTML sets up a simple webpage with a header, a button, and a paragraph to display the result.
- CSS Styling: Basic styles are applied to make the page look appealing, with a gradient background and styled button.
- JavaScript Functionality –
- An event listener is added to the button, which triggers a function when clicked.
- Inside the function,
minandmaxvariables define the range for random numbers. Math.random()generates a random floating-point number between 0 (inclusive) and 1 (exclusive).- Multiplying by
(max - min + 1)and addingminadjusts the range. Math.floor()rounds down to the nearest whole number.- The resulting number is displayed in the paragraph with ID
result.
Output
When the “Generate” button is clicked, a random number between 1 and 9999 is generated and displayed on the webpage. Each click produces a new random number, showcasing the dynamic capability of JavaScript.
