Video Tutorial:
If you prefer to learn by coding along to a video tutorial you can check out the video down below. Also, subscribe to my youtube channel where I post new tutorials, tricks and tips regularly.
Project Folder Structure:
Before we start the actual coding let us create the project folder structure. The project folder is called – “Random Number Generator”. Within this folder, we have three files. These files are index.html, style.css and script.js. Now, these files are the HTML document, the stylesheet and the script file.
HTML:
Now that the project folder is ready. Let us start with the HTML code. This creates the layout necessary for our project. 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>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="input-wrapper">
<label for="min">Min:</label>
<input type="number" id="min" value="0" />
</div>
<div class="input-wrapper">
<label for="max">Max:</label>
<input type="number" id="max" value="10" />
</div>
</div>
<button id="generate">Generate</button>
<div id="result"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this generator 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 {
height: 100vh;
background: linear-gradient(#f0f1f4 50%, #f5a623 50%);
}
.container {
background-color: #ffffff;
width: 85vw;
max-width: 34em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 0.5em;
box-shadow: 0 1.2em 2.8em rgba(0, 41, 22, 0.2);
}
.wrapper {
display: flex;
justify-content: space-between;
gap: 3em;
}
label {
font-size: 1.2em;
font-weight: 600;
color: #242e4c;
}
input {
display: block;
width: 100%;
font-size: 1.3em;
border: none;
color: #444b5f;
border-bottom: 1.5px solid #242e4c;
padding: 0.45em;
margin-top: 0.45em;
outline: none;
}
input:focus {
border-color: #f5a623;
}
button#generate {
display: block;
width: 100%;
font-size: 1.1em;
margin: 2.7em 0 1.1em 0;
background-color: #f5a623;
padding: 0.8em 0;
border: none;
border-radius: 0.5em;
cursor: pointer;
color: #ffffff;
}
#result {
text-align: center;
font-size: 3.7em;
font-size: 600;
color: #242e4c;
}
Javascript:
Lastly, we implement the functionality of the number generator. To do this we use javascript. Now copy the code below and paste it into your script file.
let generateBtn = document.getElementById("generate");
function randomNum() {
let min = document.getElementById("min");
let max = document.getElementById("max");
let minValue = Number(min.value);
let maxValue = Number(max.value);
if (minValue > maxValue) {
minValue = maxValue + minValue;
maxValue = minValue - maxValue;
minValue = minValue - maxValue;
min.value = minValue;
max.value = maxValue;
}
let num = Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
document.getElementById("result").innerText = num;
}
window.addEventListener("load", randomNum());
generateBtn.addEventListener("click", randomNum);
That’s it for this tutorial. If you have any issues while creating this code you download the source code by clicking on the download button below. Also, if you have any queries, suggestions or feedback do comment below.
Happy Coding!
