Day 7 - Session 2: JavaScript Practice - Multiplication Table Generator

#webdev #javascript #css #html

Hey Coders!!

Today’s JavaScript session was super exciting and productive. We worked on a small but powerful project: a Multiplication Table Generator.
This project helped us understand how JavaScript handles user input, loops, and number conversions in real-time.

Project: Multiplication Table Generator

We built a simple web app where a user can input any number, click the "Generate" button, and instantly see the multiplication table (1 to 10) displayed on the screen.

Key Learnings:

1.parseInt()

We used parseInt() to safely convert the input (which comes as a string from the input field) into an integer. Without this, we can’t perform mathematical operations properly.

let number = parseInt(document.getElementById("my-input").value);

NaN (Not a Number)

If someone types a non-numeric value or leaves the input empty, parseInt() returns NaN. We used isNaN() to check for this and show a proper message to the user.

if (isNaN(number))
 {
    result = "Enter valid input";
 }

Looping with while

To generate the table, we used a while loop. This helped us understand how loops work and how we can build dynamic outputs.

let i = 1;
while (i <= 10) 
{
    result += `${n} * ${i} = ${i * n}\n`;
    i++;
}

Output Example:

If the user inputs 5, the output will be:

5 * 1 = 5
5 * 2 = 10
...
5 * 10 = 50

What I Practiced:

HTML input and button usage
JavaScript event handling (onclick)
Input validation using isNaN()
Generating dynamic text using loops and string interpolation.

Here is My Code:

html

<body>
    <div class="layout">

        <h1>Multiplication Table Generator</h1>

        <div class="input">
            <label for="">Enter a number: </label>
            <input type="number" id="my-input">
            <button onclick="generateTable()">Generate</button>
        </div>

        <div id="result">

        </div>
    </div>

js

<script>

        function generateTable() {
            let result = '';
            let number = parseInt(document.getElementById("my-input").value); 
            // parseInt helps for get input only numbers if anyone put string the output will NaN(not a number)
            if (isNaN(number))
            {
                result = "Enter valid input";
            } 
            else 
            {
                let i = 1;
                let n = number;
                result = '';

                while (i <= 10) 
                {
                    result += `${n} * ${i} = ${i * n}\n`;
                    i++;
                }
            }

            document.getElementById('result').innerText = result;
        }
    </script>