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 random number generator html code project, the system will choose the number and give us an output within a defined range.
random number generator html code 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.
50+ HTML, CSS & JavaScript Projects With Source Code
Random number generators can be hardware-based or pseudo-random number generators.
| Code by | Coding Commanders |
| Project Download | Link Available Below |
| Language used | HTML , CSS and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
The heading for our random number generator html code 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.
HTML Code Output:-
ADVERTISEMENT
CSS Code for Random Number Generator:-
ADVERTISEMENT
.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%;}
}ADVERTISEMENT
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.
ADVERTISEMENT
Restaurant Website Using HTML and CSS
ADVERTISEMENT
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.
CSS Output:
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.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
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 Html and JavaScript:-
Live Preview Of Random Number Generator:-
We have successfully created our project. 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.
10+ HTML CSS Projects For Beginners (Source Code)
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
FAQs:-
Which code editor do you use for Random Number Generator coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
What is a function of Math.ceil in JAVASCRIPT, and how is it used?
This function used in Java Script Math.ceil to round any number to it is nearest integer, it is “ceiling”.Math.ceil(x);
Here (x) is the number you want to round.
