Build a multiplication table generator that displays a formatted table for any number the user enters.

Multiplication Table Generator

Problem

Build a multiplication table generator where the user enters a number and a limit, and the app displays a clean formatted multiplication table for that number.

Input: Number = 5, Limit = 10
Output:
5 × 1  = 5
5 × 2  = 10
5 × 3  = 15
5 × 4  = 20
5 × 5  = 25
5 × 6  = 30
5 × 7  = 35
5 × 8  = 40
5 × 9  = 45
5 × 10 = 50

Input: Number = 7, Limit = 5
Output:
7 × 1 = 7
7 × 2 = 14
7 × 3 = 21
7 × 4 = 28
7 × 5 = 35

Input: Number = (empty)
Output: Please enter a number

Logic

Select the number input, limit input, button, and result display
Listen for click on the button and Enter key on inputs
Read and validate both inputs
Loop from 1 to the limit
On each iteration calculate number × i
Build a row for each result
Append all rows to the result display

Flow

HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiplication Table Generator</title>
    <style>
      body {
        font-family: sans-serif;
        max-width: 420px;
        margin: 60px auto;
        padding: 0 20px;
      }

      /* inputs sit side by side */
      .input-row {
        display: flex;
        gap: 12px;
        margin-bottom: 14px;
      }

      .input-group {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 6px;
      }

      label {
        font-size: 0.85rem;
        font-weight: 500;
        color: #555;
      }

      input[type="number"] {
        padding: 10px;
        font-size: 1rem;
        border: 2px solid #ccc;
        border-radius: 8px;
        outline: none;
        width: 100%;
        box-sizing: border-box;
      }

      input[type="number"]:focus {
        border-color: #555;
      }

      button {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
        font-weight: 600;
        background: #111;
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 20px;
      }

      button:hover {
        opacity: 0.85;
      }

      /* error message */
      #error {
        color: #c0392b;
        font-size: 0.9rem;
        margin-bottom: 12px;
        display: none;
      }

      /* the table container */
      #table-container {
        display: none;
        background: #f5f5f5;
        border-radius: 10px;
        padding: 16px 20px;
      }

      #table-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: #333;
      }

      /* each row of the multiplication table */
      .table-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e0e0e0;
        font-size: 1rem;
        color: #333;
      }

      .table-row:last-child {
        border-bottom: none;
      }

      /* the result part of each row is bold */
      .table-row .result {
        font-weight: 700;
        color: #111;
        font-size: 1.05rem;
      }
    </style>
  </head>
  <body>
    <h1>Multiplication Table</h1>

    <div class="input-row">
      <!-- the number to generate the table for -->
      <div class="input-group">
        <label for="number-input">Number</label>
        <input type="number" id="number-input" placeholder="e.g. 5" />
      </div>

      <!-- how many rows to generate -->
      <div class="input-group">
        <label for="limit-input">Up to</label>
        <input type="number" id="limit-input" placeholder="e.g. 10" value="10" />
      </div>
    </div>

    <!-- error message shown on invalid input -->
    <div id="error"></div>

    <!-- generate button -->
    <button id="generate-btn">Generate Table</button>

    <!-- table is rendered inside here -->
    <div id="table-container">
      <div id="table-title"></div>
      <div id="table-body"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Solution

// Step 1 — select elements
const numberInput = document.querySelector("#number-input");
const limitInput = document.querySelector("#limit-input");
const generateBtn = document.querySelector("#generate-btn");
const error = document.querySelector("#error");
const tableContainer = document.querySelector("#table-container");
const tableTitle = document.querySelector("#table-title");
const tableBody = document.querySelector("#table-body");

// Step 2 — listen for button click
generateBtn.addEventListener("click", generateTable);

// also trigger on Enter key in either input
numberInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") generateTable();
});

limitInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") generateTable();
});

function generateTable() {
  // Step 3 — read both input values
  const numberValue = numberInput.value.trim();
  const limitValue = limitInput.value.trim();

  // Step 4 — validate inputs
  if (!numberValue) {
    showError("Please enter a number.");
    return;
  }

  if (!limitValue) {
    showError("Please enter a limit.");
    return;
  }

  const number = parseInt(numberValue);
  const limit = parseInt(limitValue);

  if (isNaN(number) || isNaN(limit)) {
    showError("Please enter valid numbers only.");
    return;
  }

  if (limit < 1) {
    showError("Limit must be at least 1.");
    return;
  }

  if (limit > 100) {
    showError("Limit cannot exceed 100.");
    return;
  }

  // Step 5 — clear any previous error and results
  hideError();
  tableBody.innerHTML = "";

  // Step 6 — set the title
  tableTitle.textContent = `Multiplication table for ${number}`;

  // Step 7 — loop from 1 to limit and build each row
  for (let i = 1; i <= limit; i++) {
    // calculate the result for this row
    const product = number * i;

    // Step 8 — create a row element
    const row = document.createElement("div");
    row.classList.add("table-row");

    // the left side shows the equation
    // the right side shows the result in bold
    row.innerHTML = `
      <span>${number} × ${i}</span>
      <span>=</span>
      <span class="result">${product}</span>
    `;

    // Step 9 — add the row to the table body
    tableBody.appendChild(row);
  }

  // Step 10 — show the table container
  tableContainer.style.display = "block";
}

// helper — shows error message
function showError(message) {
  error.textContent = message;
  error.style.display = "block";
  tableContainer.style.display = "none";
}

// helper — hides error message
function hideError() {
  error.textContent = "";
  error.style.display = "none";
}

Code Execution

Trace through Number = 5, Limit = 3:

Iteration	`i`	`number × i`	Row content
1	`1`	`5 × 1 = 5`	`5 × 1 = 5`
2	`2`	`5 × 2 = 10`	`5 × 2 = 10`
3	`3`	`5 × 3 = 15`	`5 × 3 = 15`
Done	loop ends	3 rows appended	table shown

Trace through Number = 7, Limit = 0:

Step	Code	Result
Parse limit	`parseInt("0")`	`0`
Check `limit < 1`	`0 < 1` → true	show error
Output		Limit must be at least 1

Trace through empty number input:

Step	Code	Result
Read value	`numberInput.value.trim()`	`""`
Check empty	`!""` → true	show error
Output		Please enter a number

Output

Number: 5  Limit: 5
→ 5 × 1 = 5
→ 5 × 2 = 10
→ 5 × 3 = 15
→ 5 × 4 = 20
→ 5 × 5 = 25

Number: (empty)     → Please enter a number
Number: 7  Limit: 0 → Limit must be at least 1
Number: 3  Limit: 101 → Limit cannot exceed 100

Multiplication Table Generator

On this page