Random Number Generator Using HTML Code

Hello Coder! Welcome to the Codewithrandom Blog. In this article, we create Random Number Generator Using HTML and JavaScript. There used to be a game where we humans have to select a number by picking a piece of paper or counting in mind while listening to start & stop. Now as a developer, the system will choose the number and give us an output within a defined range.

Random Number the word itself states that it will select any digit or integers in a specified pool of limited or unlimited numbers that have 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.

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

Random Number Generator Html Code:-

<!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.

The heading for our random number generator will now be added inside our div element using the h1> tag, and the form where we will accept two inputs—one for the minimum value and the other for the maximum value—will then be created using the div tag. and after that, we'll generate a random number by using a button generator with a function on click that we'll make using the button tag.

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.

We will set the padding to "2.5px" using the class selector ".classy," add a border radius of 6px using the border-radius property, set the background to "green" using the background property, and set the text colour to "white" using the border-radius property.

After that, we will style the icon, input, and body of our random number generator. To make our website more appealing, we will alter the input's colour and add the hover property to the button and input box.

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.

We have successfully created our Random Number Generator using HTML, CSS, and JavaScript. You can use this project for developing your JavaScript skills and enhancing them for the future because JavaScript is necessary to make the project responsive in Front-End Development.

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

WRITTEN BY - Harsh Sawant