JavaScript Random Number Generator Between Range

JavaScript Random Number Generator Between Range
Code Snippet:random number generator
Author: Vincent Salazar
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 409
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X