Javascript program to create multiplication table.

Knowing how to dynamically produce and display data on a webpage is essential to the field of web development. Using HTML, CSS, and JavaScript to create a multiplication table is an engaging and instructive exercise. This project helps you learn more about these technologies and gives you a real-world example of how to edit and display data on a webpage.

CREATING MULTIPLICATION TABLE

A multiplication table shows the multiplication tables of integers from 1 to a specified number .

index.html

Starting with HTML structure. This includes the container where the multiplication table will be displayed and linking to external CSS and JavaScript files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Multiplication Table</h1>
        <form id="multiplicationForm">
            <label for="number">Enter a number:</label>
            <input type="number" id="number" name="number" required>
            <button type="submit">Generate Table</button>
        </form>
        <div id="tableContainer"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

styles.css

Now, CSS styles to the presentation of the multiplication table.

body{
    font-family: Arial,  sans-serif;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: pink;
}

.container{
    text-align: center;
    background-color: whitesmoke;
    padding:20px;
    border-radius: 10px;
    box-shadow: 0px 2px 4px lemonchiffon;
}

form{
    margin-bottom: 20px;
}
label{
        margin-bottom: 20px;
}

input{
    padding:5px 10px;
    font-size: 1em;
    cursor:pointer;
    background-color: lavender;
    color:black;
    border:none;
    border-radius: 5px;
}

#tableContainer{
    margin-top:20px;
}

table{
    width:100%;
    border-collapse: collapse;
}

th,td{
    padding:10px;
    border:1px solid black;
    text-align: center;
}

th{
    background-color: bisque;
}

script.js

To create the multiplication table dynamically based on a given size, implement the JavaScript logic (`script.js`).

document.getElementById('multiplicationForm').addEventListener('submit', function(event) 
{
    event.preventDefault();
    const number = document.getElementById('number').value;
    generateTable(number);
});

function generateTable(number) {
    let tableContainer = document.getElementById('tableContainer');
    tableContainer.innerHTML = ''; 
    
    let table = document.createElement('table');
     let header = table.createTHead();
    let headerRow = header.insertRow();
    
    let th1 = document.createElement('th');
      th1.innerText = 'Multiplier';
    headerRow.appendChild(th1);
    
    let th2 = document.createElement('th');
    th2.innerText = 'Result';
      headerRow.appendChild(th2);
    
    let tbody = document.createElement('tbody');
    
    for (let i = 1; i <= 10; i++) 
        {
        let row = tbody.insertRow();
        
        let cell1 = row.insertCell();
        cell1.innerText = `${number} x ${i}`;
        
        let cell2 = row.insertCell();
        cell2.innerText = number * i;
    }
    
  table.appendChild(tbody);
  tableContainer.appendChild(table);
}

output

Conclusion:

Using HTML, CSS, and JavaScript to create a multiplication table is a fun and instructive exercise that helps reinforce fundamental web development skills. It not only improves your comprehension of CSS styling and DOM manipulation, but it also gets you ready for more difficult web development tasks. You will be well-prepared to construct and personalize multiplication tables of different sizes by according to the instructions provided in this blog article, and you will get invaluable experience in the process. Accept the process of learning, try out various layouts and features, and take pleasure in the experience of making data come to life on the internet!

Related Posts

Leave a Comment Cancel Reply