How does the RGB color guessing game work?

The RGB color guessing game displays an RGB color value (such as rgb(255, 87, 34)) in the header. Below the header is a grid of color squares — 3 squares in Easy mode and 6 squares in Hard mode. One of those squares is exactly the color described by the displayed RGB value. The player must identify which square matches by clicking it. Correct guess: all squares change to the winning color, a 'Correct!' message appears, the header background changes to the winning color, and the reset button changes to 'Play Again?'. Wrong guess: the clicked incorrect square disappears (fades to the dark background) and a 'Try Again' message shows, allowing the player to keep guessing from the remaining squares. The 'New Colors' button generates a completely new set of random colors and picks a new target color at any time.

How do you generate a random RGB color in JavaScript?

Generating a random RGB color in JavaScript requires creating three random integers between 0 and 255 (the valid range for each RGB channel) and combining them into a CSS rgb() string. The standard function: function randomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return 'rgb(' + r + ', ' + g + ', ' + b + ')'; }. Breaking it down: Math.random() returns a decimal number from 0 (inclusive) to 1 (exclusive) — for example, 0.734. Multiplying by 256 gives a number from 0 to 255.999. Math.floor() rounds down to an integer, giving 0 to 255. The template literal or string concatenation builds the CSS color string: 'rgb(255, 87, 34)'. This string can be directly assigned to element.style.backgroundColor and used for string comparison when checking if the clicked color matches the target. In the Coodeverse RGB game, this function is called inside generateRandomColors(num) which calls randomColor() num times (3 or 6) to build the colors array.

What is Math.random() in JavaScript and how does it work?

Math.random() is a built-in JavaScript method that returns a pseudo-random floating-point number from 0 (inclusive) to 1 (exclusive) — meaning it can return 0.0 but never exactly 1.0. Example output: 0.7349261..., 0.00112..., 0.9999... To generate a random integer in a range, use this pattern: Math.floor(Math.random() * (max - min + 1)) + min. For 0 to 255 (inclusive): Math.floor(Math.random() * 256) — multiplying by 256 gives 0 to 255.999, and Math.floor always rounds down. For a random array index (0 to array.length - 1): Math.floor(Math.random() * array.length) — used in the pickColor() function to randomly select which color in the array becomes the answer. In the RGB game: const random = Math.floor(Math.random() * colors.length); return colors[random]. Math.random() is not cryptographically secure — never use it for security purposes like generating tokens or passwords. For those use cases, use crypto.getRandomValues() instead.

How do you create DOM elements dynamically with JavaScript?

Creating DOM elements dynamically in JavaScript uses three steps: create, configure, and append. Step 1 — Create: const square = document.createElement('div') creates a new div element that exists in memory but is not yet in the document. Step 2 — Configure: set the element's properties, attributes, classes, and event listeners before appending. square.classList.add('square') adds a CSS class; square.style.backgroundColor = colors[i] sets an inline style; square.addEventListener('click', handler) adds interactivity. Step 3 — Append: container.appendChild(square) inserts the element as the last child of the container element, making it visible in the document. In the RGB game, setupSquares() runs this pattern in a for loop to dynamically create 3 or 6 square divs on every mode switch, by first clearing the container with container.innerHTML = '' then building fresh elements. This is more flexible than hard-coding HTML because the number of squares changes based on the selected mode. Dynamic DOM creation is a fundamental skill used in rendering lists, cards, tables, and UI components in every framework (React, Vue, Angular all use this same concept internally).

How does classList work in JavaScript?

classList is a DOM property that returns a DOMTokenList representing the CSS classes of an element. It provides four main methods: classList.add('className') — adds a class to the element. If the class already exists, it is not added twice. classList.remove('className') — removes a class from the element. No error if the class does not exist. classList.toggle('className') — adds the class if it is absent, removes it if it is present. classList.contains('className') — returns true if the class exists, false if not. In the RGB game, classList is used for the active mode button highlighting: easyBtn.classList.add('selected') and hardBtn.classList.remove('selected') when Easy is clicked — the .selected CSS class applies background: #2c8da8; color: white to show which mode is active. classList.add('square') is used when creating each color square div to apply the .square CSS styles (border-radius, cursor, transition). classList is preferred over directly manipulating element.className (a string) because it does not overwrite existing classes and has a cleaner API.

How do you create a perfect-square responsive CSS element without a fixed height?

The classic CSS technique for creating a responsive square that maintains a 1:1 aspect ratio at any width is the padding-bottom: 100% trick. CSS: .square { width: 100%; padding-bottom: 100%; background: purple; border-radius: 20px; }. Here is why it works: padding percentages in CSS are always calculated relative to the element's width (not height). Setting padding-bottom: 100% means the bottom padding equals 100% of the element's current width — making the total height (content height 0 + padding-bottom equal to width) exactly match the width. Result: a perfect square that scales proportionally at any container size. This technique is used in the RGB game so each color swatch is always perfectly square regardless of viewport width or number of grid columns. Note: the modern alternative is the CSS aspect-ratio property: .square { width: 100%; aspect-ratio: 1 / 1; } — which is more readable and supported in all modern browsers since 2021. The padding-bottom trick remains widely used in legacy code.

How do you build a CSS Grid layout for a game board?

A CSS Grid game board uses display: grid with grid-template-columns to define the number and size of columns. In the RGB color game: #container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 600px; margin: 40px auto; }. grid-template-columns: repeat(3, 1fr) creates three equal-width columns — the 1fr unit means each column takes one fraction of the available space, so they automatically divide the container into equal thirds. gap: 20px applies spacing between both rows and columns. On mobile (max-width: 600px), the media query changes to grid-template-columns: repeat(2, 1fr) — creating a two-column grid for the 6-square hard mode. The grid automatically creates rows as needed — with 6 squares in a 3-column grid, it creates 2 rows automatically. When Easy mode switches to 3 squares, the unused squares get display: none, leaving only one full row. CSS Grid is the ideal layout for game boards, image galleries, and card grids because it handles both rows and columns simultaneously with automatic row creation.

What is the difference between innerHTML and appendChild in JavaScript?

innerHTML and appendChild are both used to add content to the DOM but work very differently. innerHTML sets or reads the HTML markup inside an element as a string: container.innerHTML = '' clears all children; container.innerHTML = 'Hello' replaces all content with a paragraph. It is fast for bulk HTML insertion but has two downsides: it destroys existing event listeners on child elements (because it replaces the DOM nodes entirely), and it is an XSS vulnerability if used with unsanitized user input — innerHTML parses the string as HTML, so malicious users could inject script tags. appendChild(element) appends a single DOM node as the last child of the parent element. It preserves event listeners on existing children and does not parse strings as HTML, making it safe for user data. In the RGB game, both are used strategically: container.innerHTML = '' in setupSquares() clears the grid (destroying old squares whose event listeners are no longer needed anyway), then container.appendChild(square) adds each newly created square with its fresh click listener. The rule of thumb: use innerHTML for static HTML templates; use createElement + appendChild for dynamically generated interactive elements.

How do you compare colors in JavaScript using string comparison?

In the RGB color guessing game, color comparison works because browsers normalize inline color values to the rgb(r, g, b) string format. When you set square.style.backgroundColor = 'rgb(255, 87, 34)', the browser stores it as exactly that string. When you later read this.style.backgroundColor inside a click listener, the browser returns the same 'rgb(255, 87, 34)' string. Since pickedColor was originally set to the same randomColor() output string, a simple string equality check works: if (clickedColor === pickedColor). This works reliably because Math.floor() ensures only integers (no decimals) in the rgb string, and the format is always 'rgb(R, G, B)' with single spaces after commas — consistent throughout the code. Important caveat: this technique only works when comparing colors set via JavaScript string assignment. It does NOT work when comparing against CSS-file-defined colors (like 'red' vs 'rgb(255, 0, 0)') or hex values — the browser normalizes differently depending on how the color was set. For robust cross-format color comparison in production code, use a color parsing library or normalize to hex before comparing.

What JavaScript DOM manipulation skills does this RGB game teach?

The RGB color guessing game teaches nine essential JavaScript DOM manipulation skills that transfer directly to professional web development: (1) document.getElementById() and document.querySelector() — selecting existing elements by ID and CSS selector. (2) document.createElement() — creating new DOM elements programmatically. (3) element.appendChild() — inserting elements into the document. (4) element.addEventListener() — attaching click and other event handlers to elements. (5) element.style.backgroundColor — reading and writing inline CSS color properties directly. (6) element.classList.add() and classList.remove() — toggling CSS classes for state management. (7) element.textContent — updating text content of elements (the message display and reset button label). (8) querySelectorAll() with forEach() — batch-operating on multiple elements simultaneously. (9) Math.floor(Math.random() * n) — generating random integers for array indexing and RGB value generation. These nine skills collectively cover the foundation of everything a frontend JavaScript developer does daily — component rendering, event handling, state changes, dynamic styling, and user feedback. Completing and understanding this game fully prepares a developer for React's virtual DOM concepts, since React's reconciliation is ultimately doing the same DOM operations more efficiently.

RGB Color Guessing Game in JavaScript

Full Source Code

HTML + CSS + JavaScript — three-tab project. The most complete DOM manipulation teaching project ever built. Covers 9 core JS DOM skills in one playable game: createElement, appendChild, addEventListener, Math.random(), classList.add/remove, style.backgroundColor, querySelectorAll forEach, textContent, innerHTML reset. Study the JS tab in order — each function teaches a distinct concept. The most valuable 80 lines of JavaScript a beginner can read.

HTML

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>RGB Color Guessing Game</title>
  <style>
    body { margin: 0; font-family: 'Arial', sans-serif; background-color: #232323; color: white; text-align: center; }
    h1 { background-color: #2c8da8; margin: 0; padding: 20px 0; font-size: 3em; text-transform: uppercase; line-height: 1.2; }
    #colorDisplay { display: block; font-size: 0.4em; color: white; font-weight: bold; }
    #stripe { background: white; height: 50px; text-align: center; color: black; line-height: 50px; }
    button { border: none; background: none; height: 100%; font-weight: bold; color: #2c8da8; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; outline: none; padding: 0 10px; }
    button:hover { color: white; background: #2c8da8; }
    #container { max-width: 600px; margin: 40px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .square { width: 100%; padding-bottom: 100%; background: purple; border-radius: 20px; transition: background 0.6s; cursor: pointer; }
    #message { display: inline-block; width: 20%; font-weight: bold; color: #2c8da8; }
    .selected { background: #2c8da8; color: white; }
    @media (max-width: 600px) {
      #container { grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 20px auto; }
      h1 { font-size: 2.2em; }
      #colorDisplay { font-size: 0.3em; }
    }
  </style>
</head>
<body>
  <h1>The RGB Color Guessing Game<br><span id="colorDisplay">RGB</span></h1>
  <div id="stripe">
    <button id="reset">New Colors</button>
    <span id="message"></span>
    <button id="easyBtn">Easy</button>
    <button id="hardBtn" class="selected">Hard</button>
  </div>
  <div id="container"></div>

  <script>
    let numSquares = 6;
    let colors = [];
    let pickedColor;

    const colorDisplay  = document.getElementById("colorDisplay");
    const messageDisplay = document.getElementById("message");
    const h1            = document.querySelector("h1");
    const resetButton   = document.getElementById("reset");
    const easyBtn       = document.getElementById("easyBtn");
    const hardBtn       = document.getElementById("hardBtn");
    const container     = document.getElementById("container");

    init();

    function init() {
      setupModeButtons();
      setupSquares();
      reset();
    }

    function setupModeButtons() {
      easyBtn.addEventListener("click", function() {
        easyBtn.classList.add("selected");
        hardBtn.classList.remove("selected");
        numSquares = 3;
        reset();
      });
      hardBtn.addEventListener("click", function() {
        hardBtn.classList.add("selected");
        easyBtn.classList.remove("selected");
        numSquares = 6;
        reset();
      });
    }

    function setupSquares() {
      container.innerHTML = "";
      for (let i = 0; i < numSquares; i++) {
        const square = document.createElement("div");
        square.classList.add("square");
        square.addEventListener("click", function() {
          const clickedColor = this.style.backgroundColor;
          if (clickedColor === pickedColor) {
            messageDisplay.textContent = "Correct!";
            resetButton.textContent = "Play Again?";
            changeColors(clickedColor);
            h1.style.backgroundColor = clickedColor;
          } else {
            this.style.backgroundColor = "#232323";
            messageDisplay.textContent = "Try Again";
          }
        });
        container.appendChild(square);
      }
    }

    function reset() {
      colors = generateRandomColors(numSquares);
      pickedColor = pickColor();
      colorDisplay.textContent = pickedColor.toUpperCase();
      resetButton.textContent = "New Colors";
      messageDisplay.textContent = "";
      h1.style.backgroundColor = "#2c8da8";
      const squares = document.querySelectorAll(".square");
      for (let i = 0; i < squares.length; i++) {
        if (colors[i]) {
          squares[i].style.backgroundColor = colors[i];
          squares[i].style.display = "block";
        } else {
          squares[i].style.display = "none";
        }
      }
    }

    resetButton.addEventListener("click", reset);

    function changeColors(color) {
      document.querySelectorAll(".square").forEach(sq => {
        sq.style.backgroundColor = color;
      });
    }

    function pickColor() {
      const random = Math.floor(Math.random() * colors.length);
      return colors[random];
    }

    function generateRandomColors(num) {
      const arr = [];
      for (let i = 0; i < num; i++) {
        arr.push(randomColor());
      }
      return arr;
    }

    function randomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r}, ${g}, ${b})`;
    }
  </script>
</body>
</html>

/* RGB Color Guessing Game — Raw CSS (for separate style.css file) */

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #232323;
  color: white;
  text-align: center;
}

/* Header — changes background color on correct guess */
h1 {
  background-color: #2c8da8;
  margin: 0;
  padding: 20px 0;
  font-size: 3em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* The RGB value display inside the h1 */
#colorDisplay {
  display: block;
  font-size: 0.4em;
  color: white;
  font-weight: bold;
}

/* White control bar with New Colors, message, Easy, Hard */
#stripe {
  background: white;
  height: 50px;
  text-align: center;
  color: black;
  line-height: 50px;
}

/* Control buttons — transparent by default, teal on hover */
button {
  border: none;
  background: none;
  height: 100%;
  font-weight: bold;
  color: #2c8da8;
  letter-spacing: 1px;
  font-size: inherit;
  transition: all 0.3s;
  outline: none;
  padding: 0 10px;
}
button:hover { color: white; background: #2c8da8; }

/* Active mode button (Easy or Hard) */
.selected { background: #2c8da8; color: white; }

/* CSS Grid game board — 3 equal columns with gap */
#container {
  max-width: 600px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3-column grid */
  gap: 20px;
}

/* Color square — perfect aspect ratio using padding-bottom trick */
.square {
  width: 100%;
  padding-bottom: 100%; /* = width → always a perfect square */
  background: purple;
  border-radius: 20px;
  transition: background 0.6s; /* Smooth color change on win/lose */
  cursor: pointer;
}

/* Feedback message area */
#message {
  display: inline-block;
  width: 20%;
  font-weight: bold;
  color: #2c8da8;
}

/* Mobile: 2-column grid for 6-square hard mode */
@media (max-width: 600px) {
  #container { grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 20px auto; }
  h1 { font-size: 2.2em; }
  #colorDisplay { font-size: 0.3em; }
}

// ============================================================
// RGB COLOR GUESSING GAME — Vanilla JavaScript
// Skills: createElement, addEventListener, Math.random(),
//         classList, style.backgroundColor, querySelectorAll,
//         textContent, innerHTML, string comparison
// ============================================================

let numSquares = 6;    // 3 = Easy, 6 = Hard
let colors = [];       // Array of random RGB strings
let pickedColor;       // The one the player must find

// DOM element references — selected once, reused throughout
const colorDisplay   = document.getElementById("colorDisplay"); // Shows "rgb(R, G, B)"
const messageDisplay = document.getElementById("message");       // "Correct!" or "Try Again"
const h1             = document.querySelector("h1");             // Header — changes color on win
const resetButton    = document.getElementById("reset");         // "New Colors" / "Play Again?"
const easyBtn        = document.getElementById("easyBtn");
const hardBtn        = document.getElementById("hardBtn");
const container      = document.getElementById("container");     // The grid of squares

// Entry point — called once on page load
init();

function init() {
  setupModeButtons(); // Attach Easy / Hard event listeners
  setupSquares();     // Create the square divs
  reset();            // Generate colors and display them
}

// ---- MODE BUTTON LOGIC --------------------------------
function setupModeButtons() {
  easyBtn.addEventListener("click", function() {
    easyBtn.classList.add("selected");    // Highlight Easy button
    hardBtn.classList.remove("selected"); // Un-highlight Hard button
    numSquares = 3;
    reset(); // Regenerate with 3 squares
  });

  hardBtn.addEventListener("click", function() {
    hardBtn.classList.add("selected");    // Highlight Hard button
    easyBtn.classList.remove("selected"); // Un-highlight Easy button
    numSquares = 6;
    reset(); // Regenerate with 6 squares
  });
}

// ---- SQUARE CREATION ---------------------------------
function setupSquares() {
  container.innerHTML = ""; // Clear existing squares before recreating

  for (let i = 0; i < numSquares; i++) {
    const square = document.createElement("div"); // Create new div
    square.classList.add("square");               // Apply .square CSS class

    // Click handler for each square
    square.addEventListener("click", function() {
      const clickedColor = this.style.backgroundColor; // Read this square's color

      if (clickedColor === pickedColor) {
        // ✅ CORRECT GUESS
        messageDisplay.textContent = "Correct!";
        resetButton.textContent = "Play Again?";
        changeColors(clickedColor);          // All squares → winning color
        h1.style.backgroundColor = clickedColor; // Header → winning color
      } else {
        // ❌ WRONG GUESS — eliminate this square
        this.style.backgroundColor = "#232323"; // Fade to background (disappear)
        messageDisplay.textContent = "Try Again";
      }
    });

    container.appendChild(square); // Add to DOM
  }
}

// ---- RESET / NEW GAME --------------------------------
function reset() {
  colors = generateRandomColors(numSquares); // New random color array
  pickedColor = pickColor();                  // Randomly pick the answer

  colorDisplay.textContent = pickedColor.toUpperCase(); // Display "RGB(R, G, B)"
  resetButton.textContent = "New Colors";
  messageDisplay.textContent = "";
  h1.style.backgroundColor = "#2c8da8"; // Reset header to default teal

  // Apply colors to squares (hide extra squares if numSquares < total)
  const squares = document.querySelectorAll(".square");
  for (let i = 0; i < squares.length; i++) {
    if (colors[i]) {
      squares[i].style.backgroundColor = colors[i]; // Apply random color
      squares[i].style.display = "block";
    } else {
      squares[i].style.display = "none"; // Hide unused squares in Easy mode
    }
  }
}

resetButton.addEventListener("click", reset); // "New Colors" triggers full reset

// ---- HELPER FUNCTIONS --------------------------------

// Reveal: set all squares to the winning color
function changeColors(color) {
  document.querySelectorAll(".square").forEach(sq => {
    sq.style.backgroundColor = color;
  });
}

// Randomly select one color from the array as the answer
function pickColor() {
  const random = Math.floor(Math.random() * colors.length);
  return colors[random];
}

// Generate an array of `num` random RGB color strings
function generateRandomColors(num) {
  const arr = [];
  for (let i = 0; i < num; i++) {
    arr.push(randomColor()); // Push a new random color each iteration
  }
  return arr;
}

// Create one random rgb(R, G, B) string
// Math.floor(Math.random() * 256) → integer 0–255 for each channel
function randomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`; // Template literal → "rgb(255, 87, 34)"
}

Frequently Asked Questions — RGB Color Guessing Game

Why is the RGB color guessing game a classic JavaScript beginner project?

How do you add a score counter to the RGB color guessing game?

What is the difference between textContent and innerHTML in JavaScript?

RGB Color Guessing Game — Complete Function Reference

How to Extend the RGB Game — 5 Upgrade Ideas

Internal Links — Explore More on Coodeverse

RGB Color Guessing Game

Full Source Code