[EmperorAlii] Modify multiplication table

Author: EmperorAlii

004-number-table/EmperorAlii/multiplication-table.js

@@ -13,7 +13,7 @@ function checkValidity(number) {
 
 //clearing the input for any previous values
 function clearPreviousInputs() {
-  tableBody.innerText = '';
+  tableBody.innerHTML = '';
   tableBody.classList.remove('bg-red-400');
   tableBody.classList.remove('text-white');
   numberTableInput.classList.remove('border-red-400');
@@ -29,11 +29,25 @@ function showError() {
 
 //logic for generating table
 function multiplicationLogic(inputNumber) {
+  // Generating table rows and cells
+  const tableRow = document.createElement('tr');
+  const cells = [];
+
+  // Adding flex and flex-col classes to table row
+  tableRow.classList.add('flex');
+  tableRow.classList.add('flex-col');
+
+  // Loop to create number table
   for (i = 1; i <= 10; i++) {
-    tableBody.innerText += `
-          ${inputNumber} X ${i} = ${inputNumber * i}
-        `;
+    const cell = document.createElement('td');
+    cell.classList.add('border');
+    cell.innerText = `${inputNumber} X ${i} = ${inputNumber * i}`;
+    cells.push(cell);
   }
+
+  // Appending cells to the row and row to the table body
+  tableRow.append(...cells);
+  tableBody.appendChild(tableRow);
 }
 
 // Generate Number Table