Introduction
In this blog, I’ll walk you through a simple web project I created — a Multiplication Table Generator using basic web technologies like HTML, CSS, and JavaScript. It takes a number as input and generates its multiplication table from 1 to 10. This is a beginner-friendly project that helps understand user input, DOM manipulation, and basic styling.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; height: 100vh; } .layout{ display: flex; flex-direction: column; gap: 20px; } </style> </head> <body> <div class="layout"> <h1>Multiplication Table Generator</h1> <div class="input"> <label for="">Enter a Number</label> <input type="number" id="my-input"> <button onclick="generate_table()">Generate</button> <div id="result"> </div> </div> </div> <script> let result=""; function generate_table(){ let number= parseInt(document.getElementById("my-input").value); if(isNaN(number)) { result="Enter input invalid"; } else{ let i=1; let n=number; while(i<=10) { result+=${i} * ${n} = ${n*i}\n i++; } } document.getElementById("result").innerText=result; } </script> </body> </html> OUTPUT:
Top comments (0)