TASK3

<?php
    $r=0;
    $c=0;
    $f=0;
    $color="black";
    $size="0";
    if (isset($_GET['btn']))
    {
        if( $_GET['row']>0)
        {
            $r=$_GET['row'];
            //echo $r;
        }
        else
        {
            $r=0;
            echo "<script>alert('Enter the row more than 0')</script>";
        }
        if( $_GET['col']>0)
        {
            $c=$_GET['col'];

        }
        else
        {
            $c=0;
            echo "<script>alert('Enter the col more than 0')</script>";

        }
        if($_GET['bo']=="yes")
        {
            $color=$_GET['back1'];
            $size=$_GET['bs1'];
        }
        else
        {
            $color="black";
            $size=0;
        }


    }


?>


<html>
</head>
</head>


<style>
    body
    {
    background-image:url('backgrounds/9.jpg');
    background-size:100% 100%;
    background-attachment:fixed;
    backdrop-filter:blur(7px);
    margin:0;padding:0;height:150%;
    }
    h1
    {
    background-color:skyblue;
    font-family:Supernatural Knight;
    text-align:center;
    font-size:50px;
    }
    .l
    {
    background-color:skyblue;
    font-size:30px;
    color:white;

    }
    table.td
    {
    width:50%;
    }
</style>
<script>
    function fun1()
    {

        var bo=document.getElementById("bs");
        var bo1=document.getElementById('bs1');
        var bok=document.getElementById('back');
        var bok1=document.getElementById('back1');
        if(document.f1.bo.value=="yes")
        {

            bo.style.display='initial';
            bo1.style.display='initial';
            bok.style.display='initial';
            bok1.style.display='initial';

        }
        else
        {
            bo.style.display='none';
            bo1.style.display='none';
            bok.style.display='none';
            bok1.style.display='none';

        }


    }
    function f()
    {
        var bo=document.getElementById("bs");
        var bo1=document.getElementById('bs1');
        var bok=document.getElementById('back');
        var bok1=document.getElementById('back1');

        {
            bo.style.display='none';
            bo1.style.display='none';
            bok.style.display='none';
            bok1.style.display='none';
        }


    }

</script>
<body onload="f()">
    <h1>TASK - 3</h1>
    <form name="f1" >
        <table  cellspacing="30" align="center">
            <tr>
                <td align="right">
                    <label class="l">No of Rows:</label>
                </td>
                <td>
                    <input class="l" type="textbox" name="row" placeholder="Enter the no">

                </td>
            </tr>
            <tr>
                <td align="right">
                    <label class="l">No of Column:</label>
                </td>
                <td>
                    <input class="l" type="textbox" name="col" placeholder="Enter the no">

                </td>
            </tr>
            <tr>
                <td align="right">
                    <label class="l">Border</label>
                </td>
                <td>
                    <select class="l" name="bo" onchange="fun1()">
                        <option value="yes" >YES</option>
                        <option value="no" selected>NO</option>
                    </select>


                </td>
            </tr>
            <tr>
                <td align="right">
                    <label class="l" name="bs"id="bs"  >Border-size</label>
                </td>
                <td>
                    <input class="l" type="textbox"id="bs1"name="bs1">
                </td>
            </tr>
            <tr>
                <td align="right">
                    <label class="l" name="back" id="back" >Border-Color</label>
                </td>
                <td>
                    <input class="l" type="color"id="back1" style="height:50px;width:50%;background-color:transparent" name="back1" >
                </td>
            </tr>


            <tr>

                <td align="center" colspan="2">
                    <input class="l" type="submit"  name="btn" >
                </td>
            </tr>

            <tr >
                <td colspan="2" align="center">
                    <?php echo $color."_".$size." ----"?>
                    <table border="<?php echo $size; ?>" style="width:100%;border-color:<?php echo $color ; ?>" align="center" >
                        <?php
                            $count=1;
                            echo $r."X".$c;
                            for($i=0;$i<$r;$i++)
                            {?>
                            <tr>
                                <?php
                                    for($j=0;$j<$c;$j++)
                                    {
                                    ?>
                                    <td ALIGN="CENTER">
                                        <label> <?php echo $count;   ?></label>
                                    </td>
                                    <?php
                                        $count++;
                                    }
                                }
                            ?>
                        </table>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    </html>