HomeJavascriptRandom Number Between A Given Range Javascript

Random Number Between A Given Range Javascript

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a random number generator. To build this project we need HTML, CSS and Javascript. This tutorial is a beginner-friendly javascript project.
 
In case you are looking for more advanced tutorials you can check out this playlist here. This playlist consists of 60+ javascript projects along with source code. The difficulty of these projects varies from easy to complex. Building projects are a great way to improve your coding skills. So do give them a try.
 
Let us see how this project works. The random number generator consists of two number input fields. The user enters the minimum and maximum values in these input fields. The default values for these fields are 0 and 10 respectively. When the user clicks on submit button a random number is generated between the selected range.
 

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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

one × one =

Most Popular