Random Numbers Generator with HTML CSS & JavaScript

Discover how to use HTML, CSS, and JavaScript to generate random numbers between specific values. This detailed tutorial demonstrates how to use a latest user interface to develop a random number generator.

What is a Random Numbers Generator?

Random Number Generators are quiet yet powerful tools that supports numerous systems we depend on daily. Whether you are encrypting a message on WhatsApp, engaging in an online game, or participating in a lucky draw, there’s an RNG functioning in the background to maintain fairness and unpredictability. As technology advances, so too will the techniques for generating randomness, safeguarding a secure and equitable digital future.

In web development, random numbers generator is a crucial task, particularly for apps, games, and quizzes. You can make a straightforward yet eye-catching random number generator with HTML CSS and JavaScript.

Let’s make sure you have all the information you need before we begin.

A basic understanding of HTML is necessary to create the web page’s structure.
Basic CSS knowledge: To style and improve the appearance of the page.
Fundamental understanding of JavaScript: to give the random number generator more capabilities.

Initially, we’ll establish the fundamental layout of the page utilizing HTML. We require a little section to showcase the random number, and a button to trigger its generation. Let’s dissect into step by step.

<!DOCTYPE html> :

This indicates the document type as HTML5, allowing the browser to understand how to display the page.

<html lang = “en”> :

This represents the opening tag for the HTML document. The ‘lang = “en”‘ indicates that the page’s language is English.

Copy Text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Number Generator | Coding Jasim</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <div class="section">
    <h1>Generate Random Number</h1>
    <div class="inputRange">
      <label for="min">Min: </label>
      <input type="number" id="min" placeholder="1" value="1">
      <label for="max">Max: </label>
      <input type="number" id="max" placeholder="100" value="100">
    </div>
    <div class="randomNumber" id="randomNumber">0</div>
    <button id="genButton">Generate</button>
    <button id="copyButton">Copy to Clipboard</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

Subsequently, we’ll incorporate some CSS to enhance the appearance of the interface, giving it a tidy and modern feel.

Copy Text

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #eb74df 0%, #ddace5 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.section {
  background-color: rgb(182, 221, 252);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 350px;
}

h1 {
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 600;
  color: #035c59;
}

.inputRange {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.inputRange label {
  font-size: 16px;
  font-weight: 500;
  color: #101010;
}

.inputRange input {
  width: 60px;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #060505;
  font-size: 16px;
  text-align: center;
}

.randomNumber {
  font-size: 50px;
  /*color: #007bff;*/
  color: #004cff;
  margin-bottom: 20px;
  font-weight: 600;
  transition: transform 0.3s ease;
}

button {
  /*background-color: #007bff;*/
  background-color: #0cb78a;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  margin: 10px 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: #267d83;
  transform: scale(1.05);
}

#copyButton {
  background-color: #28a745;
}

#copyButton:hover {
  background-color: #212b88;
}

@media (max-width: 400px) {
  .section {
    width: 100%;
    padding: 20px;
  }

  .randomNumber {
    font-size: 40px;
  }

  button {
    font-size: 16px;
  }
}

Lastly, we’ll implement JavaScript to enable the functionality of random number generation.

Copy Text

document.getElementById('genButton').addEventListener('click', function() {
  const min = parseInt(document.getElementById('min').value) || 1;
  const max = parseInt(document.getElementById('max').value) || 100;
  
  const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;

  const numberDisplay = document.getElementById('randomNumber');
  numberDisplay.innerText = randomNumber;

  numberDisplay.style.transform = 'scale(1.2)';
  setTimeout(() => {
    numberDisplay.style.transform = 'scale(1)';
  }, 300);
});

document.getElementById('copyButton').addEventListener('click', function() {
  const randomNumber = document.getElementById('randomNumber').innerText;
  
  const tempInput = document.createElement('input');
  document.body.appendChild(tempInput);
  tempInput.value = randomNumber;
  tempInput.select();
  document.execCommand('copy');
  document.body.removeChild(tempInput);

  const copyButton = document.getElementById('copyButton');
  copyButton.innerText = 'Copied!';
  setTimeout(() => {
    copyButton.innerText = 'Copy to Clipboard';
  }, 2000);
});

Conclusion & Final Thoughts

You know possess the knowledge to design a basic, modern random number generator utilizing HTML, CSS, and JavaScript. Whether you’re designing a game, a quiz, or any other application, this is an excellent future to incorporate. Additionally, with the capacity to style the UI and introduce dynamic elements such as number ranges or clipboard copying, you can enhance its utility for your users.

If you encounter any problem while creating this project, you can download the source code files for free by clicking the download button. You can also view a live demo of this project by clicking the Demo button.