Table Generator using JS
M2-R5.1 · Chapter 6: JavaScript and Angular JS · 3 min read
Question - Make a Table generator of any number usingJavaScript .
Source Code -
<!DOCTYPE html>
<html>
<head>
<title>Table Generator</title>
<style>
.data{
text-align: center;
background-color: brown;
color: white;
padding: 50px;
width: 500px;
height: auto;
}
h1{
font-size: 60px;
color: rgb(253, 203, 2) ;
text-align: center;
text-shadow: 2px 2px 10px black;
}
.text{
font-size: x-large;
}
.d{
font-size: x-large;
}
body{
background-color: gray;
}
.btn{
background-color: black;
color: white;
border: 2px solid green;
border-radius: 15px;
}
.btn:hover{
background-color:skyblue;
color: black;
}
</style>
</head>
<body>
<center>
<div class="data">
<h1>Table Generator </h1>
<p class="text">Enter any no</p>
<input type="text" id="t"><br><br>
<button onclick="tab()" class="btn">Generate</button><br><br>
<div id="result" class="d"></div>
</div>
</center>
<script>
function tab(){
var n=document.getElementById('t').value;
var a=1;
let res="";
while(a<=10){
res+= n+" x "+a+" = "+(n*a)+"<br>";
a++;
}
document.getElementById('result').innerHTML=res;
}
</script>
</body>
</html>