Multiplication Tables — Practical JavaScript Projects

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

Image for post
Image for post

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. ?

Written by

Front-end Web Developer, Bootcamp grad, learning Full-stack Web Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store