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