JavaScript Random Number Generator Between Range

This JavaScript code snippet helps you to create a random number generator tool between range. It uses the Math.random() function to generate a random number. It comes with a basic interface where the user can enter a range, and the code will generate a random number within that range.

The code also displays the random number in a list, and the list items are styled with different colors. You can use this code for random passwords or other security codes.

How to Create JavaScript Random Number Generator

1. First, create the HTML structure for the random number generator as follows:

<div class="shader"></div>
<h2>Random Number Generator</h2>
    <h3>between 1 and <span id="placeholder">10</span></h3>
    <div class="wrapper">
        <div id="r-container">
            <span id="rand"></span>
        </div>
        <div class="i-container">
            <input onChange="onChange()" type="number" value="10" />
            <button id="button" onclick="random()">Generate</button>
            <div class="reset"><span onclick="resetLi()">Reset</span></div>
        </div>
        <div class="l-container">
            <ul id="list">

            </ul>
        </div>
</div>

2. Add the following CSS code to your project’s stylesheet or in a <style> tag within the HTML. This ensures the visual styling and responsiveness of the random number generator. Modify the CSS styles to match your project’s overall theme. You can customize colors, fonts, or any other visual elements to seamlessly integrate with your design.

* {
  box-sizing: border-box;
}

body{
  font-family: sans-serif;
  background: url("https://picsum.photos/1000/1000");
  background: linear-gradient(to right, #000000, #434343) !important;
  background-attachment: fixed;
  background-position: center;
  background-repeat: none;
  background-size: cover;
  transition: boxShadow 3s;
  margin: 0;
  padding: 0;
  color: white;
  background-color: black;
  min-height: 100vh;
}

 .shader {
  background-color: #000000bb;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
 h2 {
  text-align: center;
  margin-top: 0;
  padding-top: 1rem;
}
 h3 {
  text-align: center;
}
 #r-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  margin: 3rem 0;
}
 #r-container span {
  text-align: center;
  font-size: 5rem;
}
 .i-container {
  min-height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.i-container input {
  outline: none;
  border: none;
  color: white;
  background-color: transparent;
  border-bottom: 1px white solid;
  text-align: center;
  width: 7rem;
  font-size: 3vw;
}
@media (min-width: 769px) {
 .i-container input {
    font-size: 2vw;
  }
}
 .i-container button {
  background: transparent;
  font-size: 3vw;
  color: white;
  outline: none;
  border: none;
  margin: 0 0.5rem;
  padding: 1% 2%;
  cursor: pointer;
  transition: transform 0.15s;
  font-size: 3vw;
}
 .i-container button:hover {
  transform: translateY(-3.5px);
}
@media (min-width: 769px) {
 .i-container button {
    font-size: 2vw;
  }
}
 .i-container .reset {
  text-align: center;
  font-size: 3vw;
  transition: transform 0.15s;
  font-size: 3vw;
}
 .i-container .reset:hover {
  transform: translateY(-3.5px);
}
@media (min-width: 769px) {
 .i-container .reset {
    font-size: 2vw;
  }
}
 .i-container .reset span {
  cursor: pointer;
}
@media (min-width: 769px) {
 .l-container {
    padding: 0 5%;
  }
}
 .l-container #list {
  display: flex;
  flex-wrap: wrap;
}
 .l-container #list li {
  margin: 0.5rem 1rem;
  font-size: 3vw;
}
@media (min-width: 769px) {
.l-container #list li {
    font-size: 2vw;
  }
}

3. Finally, place the following JavaScript code at the end of your HTML file, just before the closing </body> tag. This ensures that the DOM is fully loaded before the script runs.

var input = document.querySelector("input");
var number = input.value;
var placeholder = document.getElementById("placeholder");
var list = document.getElementById("list");
var rand = document.querySelector("#rand");
var reset = document.querySelector(".reset");
var button = document.getElementById("button");
var body = document.querySelector("body");
// var colors = ["lightblue", "aquamarine", "pink", "bisque", "white"];
var colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99',
              '#00B3E6',
		  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
		  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
		  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
		  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
		  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
		  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
		  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
		  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
		  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

function onChange() {
  number = input.value;
  placeholder.innerHTML = number
}

function random() {
  rand.innerHTML = Math.ceil(Math.random() * number)
  var text = document.createTextNode(rand.innerHTML)
  var node = document.createElement("LI");
  node.appendChild(text);
  console.log(node)
  var randNumber = Math.floor(Math.random() * colors.length);
  var randNum = Math.floor(Math.random() * colors.length);
  node.style.color = colors[randNumber];
  reset.style.color = colors[randNum];
  button.style.border = "solid 1px" + " " + colors[randNumber];
  body.style.boxShadow = "inset 0 0 500px -200px" + " " + colors[randNumber]
  list.appendChild(node)
}

function resetLi() {
  document.querySelectorAll("li").forEach((e, i, _p) => {
    e.remove();
  })
  document.querySelector("#rand").innerHTML = ""
}

That’s all! hopefully, you have successfully created a JavaScript random number generator between range on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.