Multiplication Tables — Practical JavaScript Projects

Multiplication table is a table of the product of two numbers.

Hello 👋 my dear JavaScript developer friends. Hope you all are good and creating your dream projects. For quite some time I have been thinking about starting a series of Practical JavaScript Projects wherein I plan to create some projects in vanilla JavaScript and share with you all.

So, to start with, today I will be writing code to create basic multiplication tables with HTML table using JavaScript.

Create basic markup in index.html file

<div id="container" class="container">
</div>

Write some basic styles in styles.css

body {
   font-family: sans-serif;
   background-color: #fff68f;
}
.container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 95vh;
}
table {
   border-radius: 5px;
   border: 1px solid #9CCB19
}
th, td {
   padding: 4px 2px 4px 6px;
}
th:not(:last-child), td:not(:last-child)  {
   border-right: 1px solid grey;
}

And lets add some logic in script.js file

const num = prompt('How many multiplication tables ?')
const container = document.getElementById('container')
let output = "<h1>Multiplication Tables</h1>";
output = output + "<table>";
output = output + "<tr style='font-size:18px; color: #fff; background-color: #9CCB19;'>";
for(let i = 1; i <= num; i++){
   output = output + "<th> [ " + i + " ] </th>";
}
output = output + "</tr>";
for(let j = 1; j <=10; j++){
   let colorcode = '';
   if(j % 2 === 0){
      colorcode = '#ddd';
   } else {
      colorcode = '#fff';
   }
   output = output + "<tr style='background-color: " + colorcode + "'>";
   for(let  k = 1; k <= num; k++){
      output = output + "<td style='font-size: 16px;'>" + j + " X " + k + " = " + j*k + "</td>"
   }
   output = output + "</tr>"
}

output = output + "</table>";
container.innerHTML = output;

Save, check your browser and enjoy what we just created.

Happy coding and writing about coding! 😀

I write about programming and technology and if you follow me on Twitter I won’t waste your time. ?

Rest Parameters — ES6 features-Part-2

Spread Operator — ES6 features-Part-1