site/pascals_triangle.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="[MAZ01001.github.io] Pascal's triangle generator" >
    <meta name="author" content="MAZ01001">
        <title>Pascal's Triangle</title>
        <style>
            body{background-color: #2b2b2b;}
            div#txt{
                background-color: #202020;
                text-align: center;
                color: #ffff00;
                font-size: 50px;
            }
            div#X{
                background-color: #202020;
                text-align: center;
                color: #00ff00;
                font-size: 10px;
            }
            /* table{border: 1px solid black;} */
        </style>
        <script>
            //pascal's triangle
            /**
             * * p(6):
             * ? [    1,   1 1,  1 2 1, 1 3 3 1,1 4 6 4 1]
             * !      1
             * !     1 1
             * !    1 2 1
             * !   1 3 3 1
             * !  1 4 6 4 1
             * ! 1 5 10 10 5 1
             */

            function p(h,get=false){
                let t=[],
                    tmp=0,
                    tmps="";
                for(let i=0;i<h;i++){
                    t[i]=[];
                    for(let i2=0;i2<=i;i2++){
                        if(i2==i){t[i].push(1);}
                        else{
                            tmp=(!!t[i-1][i2-1]?t[i-1][i2-1]:0)+(!!t[i-1][i2]?t[i-1][i2]:0);
                            t[i].push(tmp);
                        }
                    }
                }
                if(get){return t;}
                /**
                 * ! arr to table**************
                 * ? tmps = "<table>"
                 * ? let countr = t.length - 1;
                 * ? t.forEach(e => {
                 * ?     tmps += "<tr><td colspan=\"" + (Math.ceil(countr / 2)) + "\">\&nbsp;<\/td>";
                 * ?     e.forEach(element => {
                 * ?         tmps += "<td>" + element + "<\/td>";
                 * ?     });
                 * ?     tmps += "<td colspan=\"" + (Math.ceil(countr / 2)) + "\">\&nbsp;<\/td><\/tr>";
                 * ?     countr--;
                 * ? });
                 * ? tmps += "<\/table>";
                 */

                //* arr to txt
                let countr=0;
                for(let i=0;i<t.length;i++){
                    for(let i2=0;i2<t[i].length;i2++){
                        if(i2===0){tmps+=t[i][i2];}
                        else{tmps+=" | "+t[i][i2];}
                    }
                    countr=0;
                    t[i].forEach(element=>countr+=element);
                    if(i==t.length-1){tmps+=" → ("+countr+")";}
                    else{tmps+=" → ("+countr+")\n\n";}
                }

                if(!get){return"{2^("+h+"-1) = "+countr+"}\n"+tmps;}
            }

            function getRows(row=[]){
                let tmp=[];
                row=row.sort(function(a,b){return a-b;});
                row.forEach(function(i){tmp.push([i,p(i,true)[i-1]]);});
                return tmp;
            }
        </script>
    </head>
    <body onload="document.getElementById('X').innerText=p(prompt('please give a hight\n(may take longer for higher values)',8))">
        <div id="txt">Pascal's Triangle</div>
        <div id="X"></div>
    </body>
</html>