Mastering Loops in JavaScript while I build a Multiplication Table Generator

AyokomiAyokomi
5 min read

I learnt JavaScript loops today, and I thought what better way to practice than building something useful and beginner-friendly? That’s how I came up with this: a simple Multiplication Table Generator that shows how to use for, while, and do-while loops.

If you're new to JavaScript (like I was not too long ago), loops might seem intimidating at first. But trust me, once you get the hang of them, they make your code cleaner, smarter, and way less repetitive.

Let me walk you through everything I did and learned while building this project!

Why Do We Even Use Loops?

Imagine this: You want to display the multiplication table for 6, like this:

6 × 1 = 6  
6 × 2 = 12  
6 × 3 = 18  
... up to 12

Without loops, I’d have to write 12 separate lines manually 😩.

But with loops? One neat block of code, and it handles everything. Magic.

What This Project Does

So here’s what I built:

  • You type in a number (say, 5)

  • Click a button to generate its multiplication table up to 12

  • Choose how it’s generated with a for, while, or do-while loop

  • The results show up instantly on the page

Let’s break it down.

My HTML Setup

Here’s what I wrote in my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multiplication Table Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Multiplication Table Generator</h1>
  <p>Enter a number to see its multiplication table up to 12:</p>

  <input type="number" id="numberInput" placeholder="Enter a number" />
  <button onclick="generateForLoop()">Generate (For Loop)</button>
  <button onclick="generateWhileLoop()">Generate (While Loop)</button>
  <button onclick="generateDoWhileLoop()">Generate (Do-While Loop)</button>

  <div id="result"></div>

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

Each button runs a different function using one of the loop types. That way, you can actually see how they work differently.

Styling It with CSS

I kept the styling clean and minimal with style.css:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
  background-color: #f9f9f9;
}

input, button {
  padding: 10px;
  font-size: 16px;
  margin: 5px;
}

button {
  margin-top: 10px;
}

#result {
  margin-top: 20px;
}

p {
  font-size: 18px;
  margin: 5px 0;
  font-family: "Courier New", Courier, monospace;
}

Nothing too fancy just something clean enough to focus on learning the logic.

The JavaScript Logic (This Is Where the Fun Happened!)

🔁 1. for Loop Version

function generateForLoop() {
  const number = parseInt(document.getElementById('numberInput').value);
  const resultDiv = document.getElementById('result');
  resultDiv.innerHTML = '';

  if (isNaN(number)) {
    resultDiv.innerHTML = '<p>Please enter a valid number.</p>';
    return;
  }

  for (let i = 1; i <= 12; i++) {
    const line = `${number} × ${i} = ${number * i}`;
    const paragraph = document.createElement('p');
    paragraph.textContent = line;
    resultDiv.appendChild(paragraph);
  }
}

What’s happening here?

  • I start from 1 and loop until 12.

  • Each time, I multiply and display the result.

This works great when I know how many times I want to loop (in this case, 12).

2. while Loop Version

function generateWhileLoop() {
  const number = parseInt(document.getElementById('numberInput').value);
  const resultDiv = document.getElementById('result');
  resultDiv.innerHTML = '';

  if (isNaN(number)) {
    resultDiv.innerHTML = '<p>Please enter a valid number.</p>';
    return;
  }

  let i = 1;
  while (i <= 12) {
    const line = `${number} × ${i} = ${number * i}`;
    const paragraph = document.createElement('p');
    paragraph.textContent = line;
    resultDiv.appendChild(paragraph);
    i++;
  }
}

What I noticed:

  • You set up the counter (i = 1) before the loop.

  • You need to manually increase it inside the loop.

This is useful when you’re not exactly sure when to stop—you let the condition decide.

3. do-while Loop Version

function generateDoWhileLoop() {
  const number = parseInt(document.getElementById('numberInput').value);
  const resultDiv = document.getElementById('result');
  resultDiv.innerHTML = '';

  if (isNaN(number)) {
    resultDiv.innerHTML = '<p>Please enter a valid number.</p>';
    return;
  }

  let i = 1;
  do {
    const line = `${number} × ${i} = ${number * i}`;
    const paragraph = document.createElement('p');
    paragraph.textContent = line;
    resultDiv.appendChild(paragraph);
    i++;
  } while (i <= 12);
}

What makes this one different?

  • It runs at least once, no matter what.

  • The condition is checked after the code runs.

Super helpful when you want the code to execute at least one time like for menu prompts or retry features.

Quick Loop Comparison

Loop TypeWhen it checks conditionRuns at least once?Best for...
forBefore starting❌Fixed number of repetitions
whileBefore each run❌When you're unsure how long
do-whileAfter one execution✅When one run is guaranteed

Try It Yourself

You can test it out:

  1. Open the HTML file in your browser.

  2. Type a number—like 7.

  3. Click each loop button one after the other.

You’ll see the same multiplication table pop up, but each was generated using a different loop behind the scenes. Cool, right?

💭 Wrapping Up

This project helped me really understand how loops work not just the syntax, but the flow.

It’s a perfect hands on way to learn:

  • How loops differ in structure and behavior

  • How to interact with user input

  • And how to update the DOM with JavaScript

Hope this helped! If you're working on loops too, I’d love to hear how it’s going or what you're building next.

0
Subscribe to my newsletter

Read articles from Ayokomi directly inside your inbox. Subscribe to the newsletter, and don't miss out.

@web3bridgealtschool africaJavaScript

Written by

Ayokomi
Ayokomi