In this blog, we are looking at Random Number Generator Source Code How to create a random number? This is very simple. We will look at some examples of PHP, JavaScript, and C. You will know how to create a random number generator with the help of any programming language.
Table of Contents
How to Create a Random Number Generator in Javascript?
Let’s take the help of Onclick to Generate a Random Number in JavaScript and create a function in which you can manually edit. Keep a limit on random numbers.
1 To 100 Random Number Generator
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
1 To 100 Random Number Generator
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="random_num">
<h1>1 TO 100 RANDOM NUMBER GENERATOR</h1>
<button id="button" onclick="getNumber()">Get a number</button> <br>
<span id="number">0</span>
</div>
<script src="demo.js"></script>
</body>
</html>Step2:- Create style.css File.
.random_num {
border: 5px solid #606600;
width: 400px;
height: 500px;
text-align: center;
margin: 100px auto;
background: #c3c3c3;
}
#number {
font-family: Georgia;
font-size: 250px;
text-align: center;
}
#button {
border: none;
font-family: Georgia;
font-size: 25px;
background: #000;
color: #fff;
padding: 10px 25px;
}
#button:hover{
background: #fff;
color: #000;
}Step3:- Create demo.js File.
function getNumber(){
var numberBox = document.getElementById("number");
/****************Click here to increase the limit on random numbers***************/
var number = Math.floor(Math.random()* 100 + 1);
numberBox.innerHTML = number;
}Note:- Also add style.css and demo.js link in index.html File.
How to Increase the limit on Random Numbers?
To increase the limit on Random Numbers, enter another Number where 100 appears.
Live Output:-
0
Create a Random Number Between Max and Min Numbers
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Create a Random Number Between Max and Min Numbers
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="randomnumgenerator">
<input type="text" id="lownum" title = "Enter LowNumber Here" value="1" />
<br>
<span style="font-weight: bold;font-size: 25px;">&</span>
<br>
<input type="text" id="highnum" title = "Enter HighNumber Here" value="10000" />
<br />
<button id="getit" title = "Enter Here" >Click Here</button>
<h1>Generate Number</h1>
<div id="randomnum"></div>
</div>
<script src="demo.php"></script>
</body>
</html>Step2:- Create style.css File.
.randomnumgenerator{
background: #cfcfe3;
width: 250px;
padding: 50px;
margin: auto;
text-align: center;
}
.randomnumgenerator h1{
font-size: 25px;
}
.randomnumgenerator input[type="text"] {
padding: 10px;
font: bold 20px system-ui, Helvetica, Sans-Serif;
width: 100px;
margin: 10px 0;
text-align: center;
border: 2px solid #000;
}
#randomnum {
font-size: 80px;
}
.randomnumgenerator button {
background: #1f1f32;
padding: 10px 25px;
color: #fff;
font-size: 25px;
font-weight: bold;
border: none;
border-radius: 50px;
box-shadow:0px 2px 5px 5px rgba(0, 0, 0, 0.5);
}Step3:- Create demo.js File.
function IsNumeric(n) {
return !isNaN(n);
}
const generateButton = document.querySelector("#getit");
const lowInput = document.querySelector("#lownum");
const highInput = document.querySelector("#highnum");
const randomnumOutput = document.querySelector("#randomnum");
generateButton.addEventListener("click", () => {
var numLow = lowInput.value;
var numHigh = highInput.value;
var adjustedHigh = parseFloat(numHigh) - parseFloat(numLow) + 1;
var numRand = Math.floor(Math.random() * adjustedHigh) + parseFloat(numLow);
if (
IsNumeric(numLow) &&
IsNumeric(numHigh) &&
parseFloat(numLow) <= parseFloat(numHigh) &&
numLow != "" &&
numHigh != ""
) {
randomnumOutput.innerText = numRand;
} else {
randomnumOutput.innerText = "Careful now...";
}
return false;
});Live Output:-
See the Pen Generate a Random Number Between low and high numbers… by khushal (@mr__khushal) on CodePen.
How to Create a Random Number Generator in PHP?
A random number generator is created using the PHP rand () function.
Example:-
<!DOCTYPE html>
<html>
<head>
<!----create code by Myprograming.com------->
<meta charset="utf-8">
<title>Create a Random Number Generator in PHP</title>
</head>
<style type="text/css">
.php-btn{
padding: 10px 50px;
border: none;
margin-top: 10px;
background: red;
}
.php-btn a{
font-size: 25px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
text-decoration: none;
}
</style>
<body>
<h1> Create a Random Number Generator in PHP </h1>
<?php
echo "<h1>Random Numer rand();</h1>";
echo(rand() . "<br>");
echo "<h1>Random Numer rand(min,max);</h1>";
echo(rand(10,100));
?>
<br>
<button class="php-btn"><a href="index.php">refresh</a></button>
</body>
</html>Output:-
