Create Random Number Generator Using Javascript ( Source Code)

Create Random Number Generator Using Javascript ( Source Code)

Random Number the word itself states that it will select any digit or integers in a specified pool of limited or unlimited numbers that has no discernible pattern for prediction. A random number generator, like the ones above, is a device that can generate one or many random numbers within a defined scope.

Random number generators can be hardware based or pseudo-random number generators.

There used be a game where we human have to select a number by picking a piece of paper or counting in mind while listening start & stop. Now as developer the system will choose the number and give us as a output within a defined range. So Hey, Coders Welcome back to codewithrandom today we’ll learn a Random Number Generator project which is basically helpful for beginners who are willing to learn JavaScript.

I hope you must have got an idea about the project.
Let’s have a look at our project.

HTML Code for Random Number Generator

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <title>JavaScript Random Number Generator</title>
  <link rel="stylesheet" type="text/css" href="random.css">
  <meta name="description" content="Use Vanilla JavaScript to generator a number in a given range!">

</head>
<body>
   <div class="row">
     <div class="col-2"></div>
     <div class="col-8" align="center">
       <h1>JavaScript Random Number Generator</h1>
       <div class="myform">
      I will generate a random integer between <br><br><input type="number" id="min_value" placeholder="Min Value"><br>
      <br>and<br><br>
      <input type="number" id="max_value" placeholder="Max Value"><br>
      <br><br>
      <button id="myBut" onclick="generate()" onmousedown="sound.play()">Generate!</button><br><br>
        <div class="green" id="output"> </div>
      </div>
    </div>
  </div>
    <script src="script.js"></script>
</body>
</html>

This is the HTML Code for the Number Generator in this code we have divided the window in rows calling the div function.

And defined a button in which we have defined onclick() function which will make it responsive while we click it and play a Sound. Now we are done with the HTML part let’s create a CSS script and style the page.

CSS Code for Random Number Generator

.classy {
  padding: 2.5px;
  border-radius: 6px;
  background-color: green;
  color: white;
  font-size: 24px;
}

.classy:hover {
  opacity: .5;
  background-color: black;
}

body {
background-color: black;
color: #49FF0D;
line-height: 1.5;
font-size: 24px;
}

/* Style inputs with type="text", select elements and textareas */
input[type=number] {
background-color: rgb(8,13,32);
padding: 12px; /* Some padding */
color: lightgreen;
font-size: 24px;
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}


button {
background-color: lightgreen;
color: black;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 24px;
}

button:hover {
border-color: grey;
border-style: solid;
border-width: 1px;
opacity: .5;
}

.green {
color: lightgreen;
font-size: 56px;
}

/* All elements width includes borders and padding*/
* {
box-sizing: border-box;
}

/* Rows*/
.row::after {
content: "";
clear: both;
display: table;
}

/* Classes containing "col-"*/
[class*="col-"] {
float: left;
padding: 15px;
}

/* Column width for small devices (i.e. smart phones)*/
[class*="col-"] {
width: 100%;
}

/* Column width for large devices (i.e. computers)*/
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

/* Column width for large devices (i.e. tablets)*/
@media only screen and (min-width: 600px) {
.col-t-1 {width: 8.33%;}
.col-t-2 {width: 16.66%;}
.col-t-3 {width: 25%;}
.col-t-4 {width: 33.33%;}
.col-t-5 {width: 41.66%;}
.col-t-6 {width: 50%;}
.col-t-7 {width: 58.33%;}
.col-t-8 {width: 66.66%;}
.col-t-9 {width: 75%;}
.col-t-10 {width: 83.33%;}
.col-t-11 {width: 91.66%;}
.col-t-12 {width: 100%;}
}

In this CSS Code we have set the width for each column and row also we have designed the body as per the CSS properties so that it doesn’t look like a simple project.

Now that we have created the structure and designed the page we have to make it responsive to generate the numbers in that case we’ll create a JavaScript.

JavaScript Code for Random Number Generator

var sound = new Audio();
sound.src = "https://www.codingcommanders.com/javascript/random-number-generator/chime.mp3";

function randNum(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function generate () {
  let min = document.getElementById('min_value').value;
  let max = document.getElementById('max_value').value;
  let rand = randNum(min,max);
  document.getElementById("output").innerHTML = rand;
}

document.getElementById("myBut").addEventListener("click", generate);

In this script we added the sound and mention the source of it and to generate random number we have defined Math.ceil a JS function which is used to round up a number and pass it to the nearest integer.

We have also defined Math.floor this method returns the smallest integer greater than or equal to the value we pass an integer.

Now We have completed the Java Script Code. and Hence We came to the end of this project but before that, we make sure to preview our project in the given output section.

FINAL OUTPUT of Random Number Generator using Javascript 


We have Successfully created our Random Number Generator using HTML5, CSS3 & JS | Javascript Random Number Generator You can use this project for developing your JavaScript skills and enhance for the future because JavaScript is necessary to make the project responsive in Front-End Development.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

WRITTEN BY – Harsh Sawant

Share on:

Leave a Comment