Javascript code to generate Pascal Triangle

To build a pascal triangle, start with “1” at the top, then continue placing numbers below it in a triangular pattern.
Each number is the sum of numbers directly above it.
Example:
pascalTriangle

        /*
         Function that takes number of rows as input. 
         Output is a 2D array with the values.
        */
        function generatePascal(n){
            //2D array
            var arr = [];
            var tmp;
            for(var i=0;i<n;i++){
                //Each element in array is in turn an array
                // The index is the row number and the array values are the row values
                arr[i]=[];
                for(var j=0; j<=i; j++){
                    //If index is last element the value is always 1
                    if(j==i){
                        arr[i].push(1);
                    }else{
                        //The following line adds up the two numbers directly above this element.
                        tmp = (!!arr[i-1][j-1]?arr[i-1][j-1]:0)+(!!arr[i-1][j]?arr[i-1][j]:0);
                        arr[i].push(tmp);
                    }
                }
            }
            return arr;
        }

JS Bin on jsbin.com

Complete code with html,styles and JS

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            margin: 0 auto;
        }
 
        .block {
            display: inline-block;
            position: relative;
            border: 1px solid grey;
            text-align: center;
            font-size: .8em;
            width: 2em;
        }
 
        .divblock {
            text-align: center;
            vertical-align: middle;
        }
 
        #pascal {
            margin: 0 auto;
            text-align: center;
        }
 
        .block:nth-child(odd) {
            background: cyan;
        }
 
        .block:nth-child(even) {
            background: grey;
        }
    </style>
    <script>
        function printPascalTriangle(){
            document.getElementById("pascal").innerHTML = "";
            var rows = document.getElementById("numRows").value;
            var arr = generatePascal(+rows);
            for(var i=0;i<arr.length;i++){
                var div = document.createElement('div');
                div.className ="divblock"
                for(var j=0;j<arr[i].length;j++){
                    var span = document.createElement('span');
                    span.innerHTML=arr[i][j];
                    span.className ="block";
                    div.appendChild(span);
                }
                document.getElementById("pascal").appendChild(div);
            }
        }
        function generatePascal(n){
            var arr = [];
            var tmp;
            for(var i=0;i<n;i++){
                arr[i]=[];
                for(var j=0; j<=i; j++){
                    if(j==i){
                        arr[i].push(1);
                    }else{
                        tmp = (!!arr[i-1][j-1]?arr[i-1][j-1]:0)+(!!arr[i-1][j]?arr[i-1][j]:0);
                        arr[i].push(tmp);
                    }
                }
            }
            return arr;
        }
    </script>
</head>
 
<body>
    <div class="container">
        <input type="text" placeholder="Enter number of rows for pascal Triangle" style="width:80%" id="numRows">
        <input type="button" " value="Go " name="Go " onClick="printPascalTriangle() ">
        <div id="pascal"></div>
    </div>
</body>
</html>

Final Output for 15 rows:

pascalsTriangle15

“There is always something more to learn and understand.”
-Rushi

Rushi's

Java, Js and everything web

Javascript code to generate Pascal Triangle

One thought on “Javascript code to generate Pascal Triangle”

Jerry

Leave a Reply