Wall Builder

Choose a wall type, size, and colour to build your wall.

Wall type

Size 5

Colour

No wall selected.

How to Build This Program

Create the HTML controls

Set up a dropdown for the wall type, a range slider for size, and a colour picker. Each control calls buildWall() when it changes.

<!-- Wall type dropdown — triggers buildWall() when changed -->
<select id="typewall" onchange="buildWall()">
  <option value="nowall">No Wall</option>
  <option value="squarewall">Square</option>
  <option value="trianglewall">Triangle</option>
</select>

<!-- Slider — shows the current number, then rebuilds the wall -->
<input type="range" id="sizewall" min="2" max="10" value="5"
       oninput="updateSize(); buildWall()">

<!-- Colour picker — rebuilds with the chosen colour on every change -->
<input type="color" id="colorwall" value="#e53e3e"
       oninput="buildWall()">
                

Create a container div for the wall

This empty div is where the bricks will be injected by JavaScript using innerHTML.

<!-- JavaScript will replace everything inside here with bricks -->
<div id="wall">
  <h2>No wall selected.</h2>
</div>
                

Read the control values in JavaScript

Use getElementById to grab the current wall type, size, and colour whenever buildWall() is called.

function buildWall() {
  // What kind of wall? 'nowall', 'squarewall', or 'trianglewall'
  const type  = document.getElementById('typewall').value;
  // How many rows tall? Convert the string value to a number
  const size  = parseInt(document.getElementById('sizewall').value);
  // Hex colour string, e.g. '#e53e3e'
  const color = document.getElementById('colorwall').value;
  // The div we will fill with bricks
  const wall  = document.getElementById('wall');
                

Build the wall with nested loops

Loop through rows and columns. For a triangle, each row has one more brick than the last. For a square, alternate rows are offset to create a staggered brick pattern.

  let html = '';

  for (let row = 0; row < size; row++) {

    // Triangle grows one brick wider each row; square stays the same width
    let cols;
    if (type === 'trianglewall') {
      cols = row + 1;
    } else {
      cols = size;
    }

    // Every other row is shifted right to look like real bricks
    let rowClass = 'wall-row';
    if (type === 'squarewall' && row % 2 === 1) {
      rowClass += ' staggered';
    }

    html += `<div class="${rowClass}">`;
    for (let col = 0; col < cols; col++) {
      html += `<div class="brick" style="background-color:${color}"></div>`;
    }
    html += '</div>';
  }
  wall.innerHTML = html;
}
                

Style the bricks with CSS

Each brick is a div styled to look like a real brick. The .staggered class shifts alternate rows to the right using margin-left.

.brick {
  width: 60px;          /* standard brick width */
  height: 28px;         /* standard brick height */
  border: 2px solid rgba(0,0,0,0.25);  /* dark outline */
  border-radius: 3px;  /* slightly rounded corners */
  margin: 2px;          /* gap between bricks (the mortar) */
  /* inner highlight on top, subtle drop shadow on bottom */
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3),
              0 1px 2px rgba(0,0,0,0.2);
}

.wall-row.staggered {
  margin-left: 31px;  /* half a brick width — offsets alternating rows */
}
                

Full Source Code

Copy this into a single .html file and open it in your browser — no server needed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Wall Builder</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #fef9e7;
      padding: 2rem;
    }

    h1 { font-size: 1.8rem; color: #222; margin-bottom: 0.25rem; }
    .subtitle { color: #555; margin-bottom: 1.5rem; }

    .controls {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 2rem;
      background: white;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 1rem 1.25rem;
      max-width: 600px;
    }

    .controls label {
      font-size: 0.9rem;
      font-weight: 500;
      color: #444;
      margin-right: 0.4rem;
    }

    .controls select,
    .controls input[type="range"] {
      padding: 0.35rem 0.6rem;
      font-size: 0.95rem;
      border-radius: 6px;
      border: 1px solid #ccc;
    }

    .controls input[type="color"] {
      width: 36px;
      height: 32px;
      border: 1px solid #ccc;
      border-radius: 6px;
      cursor: pointer;
      padding: 2px;
    }

    .size-value { font-size: 0.9rem; color: #666; }

    .wall-row { display: flex; }

    .brick {
      width: 60px;
      height: 28px;
      border: 2px solid rgba(0,0,0,0.25);
      border-radius: 3px;
      margin: 2px;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.3),
                  0 1px 2px rgba(0,0,0,0.2);
      transition: background-color 0.3s;
    }

    .wall-row.staggered { margin-left: 31px; }

    #wall h2 { color: #888; font-weight: 400; }
  </style>
</head>
<body>

  <h1>Wall Builder</h1>
  <p class="subtitle">Choose a wall type, size, and colour.</p>

  <div class="controls">
    <div>
      <label for="typewall">Wall type</label>
      <select id="typewall" onchange="buildWall()">
        <option value="nowall">No Wall</option>
        <option value="squarewall">Square</option>
        <option value="trianglewall">Triangle</option>
      </select>
    </div>
    <div>
      <label for="sizewall">Size</label>
      <input type="range" id="sizewall" min="2" max="10" value="5"
             oninput="updateSize(); buildWall()">
      <span class="size-value" id="sizeDisplay">5</span>
    </div>
    <div>
      <label for="colorwall">Colour</label>
      <input type="color" id="colorwall" value="#e53e3e"
             oninput="buildWall()">
    </div>
  </div>

  <div id="wall">
    <h2>No wall selected.</h2>
  </div>

  <script>
    function updateSize() {
      document.getElementById('sizeDisplay').textContent =
        document.getElementById('sizewall').value;
    }

    function buildWall() {
      const type  = document.getElementById('typewall').value;
      const size  = parseInt(document.getElementById('sizewall').value);
      const color = document.getElementById('colorwall').value;
      const wall  = document.getElementById('wall');

      if (type === 'nowall') {
        wall.innerHTML = '<h2>No wall selected.</h2>';
        return;
      }

      let html = '';
      for (let row = 0; row < size; row++) {
        const cols = (type === 'trianglewall') ? row + 1 : size;
        const stagger = (type === 'squarewall' && row % 2 === 1)
                        ? ' staggered' : '';
        html += `<div class="wall-row${stagger}">`;
        for (let col = 0; col < cols; col++) {
          html += `<div class="brick"
                    style="background-color:${color}"></div>`;
        }
        html += '</div>';
      }
      wall.innerHTML = html;
    }
  </script>

</body>
</html>