JavaScript Notes

Build a JavaScript Random Number Generator - Step by Step Tutorial

Learn to build a random number generator in JavaScript with min/max range, integer/decimal modes, history log, exclude list, and bulk generation.

What You'll Learn

How Math.random() works and its range [0, 1)
How to generate integers and decimals in a custom range
How to exclude specific numbers from results
How to generate bulk batches of random numbers
How crypto.getRandomValues() provides cryptographically secure randomness

Project Overview

This project goes beyond a single button — it lets users configure min/max, integer vs decimal mode, decimal precision, excluded values, and batch size. A history panel keeps track of every generated number.

Component Structure

Random Number Generator - Architecture Diagram

How It Works — Flow Diagram

text example

getRandomInt(min, max)
  → Math.floor(Math.random() * (max - min + 1)) + min

getRandomFloat(min, max, decimals)
  → (Math.random() * (max - min) + min).toFixed(decimals)

generate()
  → loop until a non-excluded number is found (with escape hatch)
  → push to history[]
  → render

Step-by-Step Build

Step 1 — HTML Structure

html example

<div class="rng-app">
  <h1>🎲 Random Number Generator</h1>

  <div class="config-panel">
    <div class="config-row">
      <label>Min: <input type="number" id="minVal" value="1"></label>
      <label>Max: <input type="number" id="maxVal" value="100"></label>
    </div>
    <div class="config-row">
      <label><input type="radio" name="mode" value="integer" checked> Integer</label>
      <label><input type="radio" name="mode" value="decimal">  Decimal</label>
      <label id="decPrecisionLabel">Precision: <input type="number" id="precision" value="2" min="1" max="10"></label>
    </div>
    <div class="config-row">
      <label>Exclude (comma-separated): <input type="text" id="excludeInput" placeholder="e.g. 13, 42"></label>
    </div>
    <div class="config-row">
      <label>Batch size: <input type="number" id="batchSize" value="10" min="1" max="1000"></label>
    </div>
  </div>

  <div id="resultDisplay" class="result-display">
    <span id="resultNumber">—</span>
  </div>

  <div class="btn-row">
    <button id="generateBtn" class="btn-gen">🎲 Generate</button>
    <button id="batchBtn"    class="btn-batch">📋 Batch</button>
    <button id="clearBtn"    class="btn-clear">🗑 Clear</button>
  </div>

  <div class="history-section">
    <h3>History (<span id="histCount">0</span>)</h3>
    <div id="historyDisplay" class="history-display"></div>
  </div>

  <div id="batchOutput" class="batch-output hidden"></div>
</div>

Step 2 — Core Random Functions

js example

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomFloat(min, max, decimals) {
  const raw = Math.random() * (max - min) + min;
  return parseFloat(raw.toFixed(decimals));
}

Step 3 — Generate with Exclusion

Example

Step 4 — Batch Generation

Example

document.getElementById("batchBtn").addEventListener("click", () => { const n = parseInt(document.getElementById("batchSize").value) || 10; const results = Array.from({ length: n }, () => generate(false)).filter(v => v !== null); history.unshift(...results.slice(0, 100 - history.length)); renderHistory(); const batchOut = document.getElementById("batchOutput"); batchOut.classList.remove("hidden"); batchOut.textContent = results.join(", "); document.getElementById("resultNumber").textContent = results[0]; });

Step 5 — Render History

Example

function renderHistory() { const div = document.getElementById("historyDisplay"); div.innerHTML = history.map(n => `<span class="hist-num">${n}</span>`).join(" "); document.getElementById("histCount").textContent = history.length; }

Step 6 — Clear History

Example

document.getElementById("clearBtn").addEventListener("click", () => { history.length = 0; renderHistory(); document.getElementById("resultNumber").textContent = "—"; document.getElementById("batchOutput").classList.add("hidden"); });

Step 7 — Generate Button & Keyboard

Example

document.getElementById("generateBtn").addEventListener("click", () => generate()); document.addEventListener("keydown", (e) => { if (e.code === "Space" && document.activeElement.tagName !== "INPUT") { e.preventDefault(); generate(); } });

Step 8 — Crypto-Secure Alternative (Bonus)

Example

function secureBoundedInt(min, max) { const range = max - min + 1; const arr = new Uint32Array(1); let result; do { crypto.getRandomValues(arr); result = arr[0] % range + min; } while (arr[0] >= Math.floor(0xFFFFFFFF / range) * range); // remove modulo bias return result; } // Use this when randomness quality matters (e.g., lottery, security codes)

Console Output

Output

getRandomInt(1, 100) → 42
getRandomInt(1, 100) → 7
getRandomInt(1, 100) → 99

// With exclusions: [13, 42]
generate() → tries 42 → excluded → tries again → 17 ✅

// Decimal mode, precision=2, min=0, max=1
getRandomFloat(0, 1, 2) → 0.73
getRandomFloat(0, 1, 2) → 0.09

// Batch of 5, integer, 1-6 (dice)
[3, 6, 1, 4, 2]

Edge Cases to Handle

Situation	Expected Behavior
min >= max	Alert and block generation
All values excluded	Error after 1000 attempts
Decimal mode, precision 0	Same as integer mode
Batch size 1000	Works, but may be slow
Space bar on input	Don't trigger generate

Challenge Yourself

Dice roller — preset buttons for D4, D6, D8, D10, D12, D20
Lottery picker — generate 6 unique numbers from 1–49 (no repeats)
Normal distribution — generate numbers following a bell curve
Random color — generate a random hex color code and show a preview
Statistics — after 100 generates, show mean, min, max, and distribution histogram

Best Practices

Use Math.ceil(min) and Math.floor(max) in getRandomInt to handle float inputs correctly
The do/while exclusion loop needs an escape hatch (max attempts)
Math.random() is not cryptographically secure — use crypto.getRandomValues() for security-sensitive cases
Keep generated number history in an array, not the DOM
toFixed() returns a string — use parseFloat() to convert back to a number

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Build a JavaScript Random Number Generator - Step by Step Tutorial.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, mini, projects, random

Continue learning this concept

Mini ProjectsBuild a JavaScript Random Password Generator - Step by Step TutorialLearn to build a secure random password generator in JavaScript with length control, character type toggles, strength meter, copy to clipboard, and history.Mini ProjectsBuild a JavaScript Prime Number Checker - Step by Step Project TutorialLearn to build a prime number checker in JavaScript with trial division, Sieve of Eratosthenes, prime factorization, and range prime finder visualization.Mini ProjectsBuild a JavaScript QR Code Generator - Step by Step Project TutorialLearn to build a QR code generator in JavaScript using the QRCode.js library, with custom colors, size, logo overlay, and download as PNG functionality.Mini ProjectsBuild a JavaScript Calculator - Step by Step Project TutorialLearn to build a fully functional calculator in JavaScript with operator logic, decimal support, keyboard input, and clean UI. Perfect beginner project.Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.Mini ProjectsBuild a JavaScript Counter Application - Step by Step Project TutorialLearn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.

PreviousBuild a JavaScript Quiz App - Step by Step Project Tutorial NextBuild a JavaScript Random Password Generator - Step by Step Tutorial