Med Java

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Multiplication Table Generator ======

===== For client side (web browser) =====

This is a simple script to print a multiplication table generator using simple java script and html. \\
Output example:

{{:java-script:pasted:20230803-022409.png}}

==== All code js + html in the same file ====

<code javascript index.html>
<!DOCTYPE html>
<html>
    <head>
        <script>

            function createMultiplicationTable(rows, columns) {
                let html = '<table>';

                for(let rowNumber = 1; rowNumber <= rows; rowNumber++) {
                    html = html + '<tr>';

                    for(let columnNumber = 1; columnNumber <= columns; columnNumber++) {
                        html = html + `<td>${rowNumber * columnNumber}</td>`;
                    }

                    html = html + '</tr>';
                }


                html = html + '</table>';
                return html;
            } 

            function onGeneratePressed() {
                let rowsInput = document.getElementById("rows-input").value;
                let columnsInput = document.getElementById("columns-input").value;

                let rows = Number(rowsInput);
                let columns = Number(columnsInput);

                if (isNaN(rows) || isNaN(columns)) {
                    alert("Invalid input! Please enter numbers only.");
                    return;
                }

                let tableHTML = createMultiplicationTable(rows, columns);

                document.getElementById("table-container").innerHTML = tableHTML;
            }
        </script>
    </head>
    <body>
        <h1>Multiplication Table Generator</h1>
        <label>
            Number of rows: <input id = "rows-input" type="text">
        </label>
        <label>
            Number of columns: <input id = "columns-input" type="text">
        </label>
        <button onclick="onGeneratePressed()">Generate</button>
        <div id="table-container"></div>
    </body>
</html>
</code>

==== Js code separated from html code ====

<code html index.html>
<!DOCTYPE html>
<html>
    <head>
        <script src="generateTable.js"></script>
    </head>
    <body>
        <h1>Multiplication Table Generator</h1>
        <label>
            Number of rows: <input id = "rows-input" type="text">
        </label>
        <label>
            Number of columns: <input id = "columns-input" type="text">
        </label>
        <button onclick="onGeneratePressed()">Generate</button>
        <div id="table-container"></div>
    </body>
</html>
</code>

<code javascript generateTable.js>
function createMultiplicationTable(rows, columns) {
    let html = '<table>';

    for(let rowNumber = 1; rowNumber <= rows; rowNumber++) {
        html = html + '<tr>';

        for(let columnNumber = 1; columnNumber <= columns; columnNumber++) {
            html = html + `<td>${rowNumber * columnNumber}</td>`;
        }

        html = html + '</tr>';
    }


    html = html + '</table>';
    return html;
} 

function onGeneratePressed() {
    let rowsInput = document.getElementById("rows-input").value;
    let columnsInput = document.getElementById("columns-input").value;

    let rows = Number(rowsInput);
    let columns = Number(columnsInput);

    if (isNaN(rows) || isNaN(columns)) {
        alert("Invalid input! Please enter numbers only.");
        return;
    }

    let tableHTML = createMultiplicationTable(rows, columns);

    document.getElementById("table-container").innerHTML = tableHTML;
}
</code>

===== For server side (node.js) =====

First you need to [[.node-js:setup|setup your node.js project]]

Then create a src folder and inside it place index.js and generateTable.js:

<code javascript generateTable.js>
export function createMultiplicationTable(rows, columns) {
    let tableString = '';

    for(let rowNumber = 1; rowNumber <= rows; rowNumber++) {
        for(let columnNumber = 1; columnNumber <= columns; columnNumber++) {
            tableString = tableString + ` ${rowNumber * columnNumber} `;
        }
        tableString = tableString + '\n';     
    }

    return tableString;
}
</code>

<code javascript index.js>
import { createMultiplicationTable } from "./generateTable.js";

let args = process.argv.slice(2);

let rowsInput = args[0];
let columnsInput = args[1];

let rows = Number(rowsInput);
let columns = Number(columnsInput);

if (isNaN(rows) || isNaN(columns)) {
    console.log("Invalid input! Please enter numbers only.");
}
else {
    let tableString = createMultiplicationTable(rows, columns);
    console.log(tableString);
}
</code>

To run the code, from the project root folder:

<code>
node src/index.js 5 5
</code>

Will output in the console:

<code>
1  2  3  4  5     
2  4  6  8  10    
3  6  9  12  15   
4  8  12  16  20  
5  10  15  20  25 
</code>