Introduction:
Welcome, fellow developers, to an exciting journey of mastering random number generation in JavaScript! In this tutorial, we will delve into the intricacies of generating and displaying random numbers using JavaScript. Whether you’re a beginner seeking to enhance your skills or an experienced developer looking for a quick refresher, this tutorial has something for everyone.
Things You Will Learn:
- Understanding the basics of random number generation in JavaScript.
- Creating a dynamic user interface with HTML and CSS.
- Implementing interactive behavior with JavaScript.
- Utilizing event listeners to trigger actions on user input.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading a blog post you can check out the video down below. Also, subscribe to my YouTube channel where I post new tutorials every alternate day.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. And Finally, Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Number Generator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Random Number Generator</h2>
<p>Click the button to generate and display a random number:</p>
<button id="generateButton">Generate Random Number</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #5373ee;
}
.container {
background-color: #ffffff;
width: min(500px, 90%);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 0.5em;
text-align: center;
}
button {
background-color: #5373ee;
padding: 1em 0.5em;
width: 100%;
color: #ffffff;
border: none;
font-size: 1em;
margin: 2em 0 1em 0;
border-radius: 0.3em;
cursor: pointer;
}
p#result {
font-size: 1.2em;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Function to generate and display a random number
function generateRandomNumber() {
const min = 1;
const max = 100; // You can change the range as needed
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
//Display the random number in the result paragraph
document.getElementById(
"result"
).textContent = `Random Number: ${randomNumber}`;
}
//Add a click event listener to the button
document
.getElementById("generateButton")
.addEventListener("click", generateRandomNumber);
Conclusion:
Congratulations on completing this hands-on tutorial! You’ve mastered the art of random number generation in JavaScript and built a simple yet powerful project. Remember, the key to becoming a proficient developer is continuous practice and exploration. Feel free to experiment with the code, add new features, and adapt it to your projects.
