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>