Differences

This shows you the differences between two versions of the page.

--- java-script:multiplication-table-generator [2023/08/02 22:18] – created odefta
+++ java-script:multiplication-table-generator [2025/01/02 18:22] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ====== Multiplication Table Generator ======
-This is a simple script to print a multiplication table generator using simple java script and html.
+===== For client side (web browser) =====
-Ex:
-<code>
+This is a simple script to print a multiplication table generator using simple java script and html. \\
-	2	3
+Output example:
-	4	6
-	6	9
+{{:java-script:pasted:20230803-022409.png}}
-</code>
-All code js + html in the same file:
+==== All code js + html in the same file ====
 <code javascript index.html>
@@ Line 23: / Line 22: @@
                     html = html + '<tr>';
-                    for(let columnNumber = 1; columnNumber <= rows; columnNumber++) {
+                    for(let columnNumber = 1; columnNumber <= columns; columnNumber++) {
                         html = html + `<td>${rowNumber * columnNumber}</td>`;
                     }
@@ Line 67: / Line 66: @@
 </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>
+  2  3  4  5
+  4  6  8  10
+  6  9  12  15
+  8  12  16  20
+  10  15  20  25
+</code>