ACTB Connection Portal: JS Mandatory Hands-on 1 CSD CTS


index.html

<!DOCTYPE html>

<html>

    <head>

        <style>

           body{

                background-color: #EED426;

                text-align: center;

           }

           h1{

                color:#006666;

                font-family: Verdana;

                text-align:center ;

           }

           p{

               text-align: center;

           }

           table{

               text-align: left;

           }

           .center {

             margin-left: auto;

             margin-right: auto;

            }

            div{

                text-align: center;

            }

        </style>

    </head>

    <body>

        <h1>ACTB Connection Portal</h1>

        <form>

            <label>Customer Name </label> <input type="text" name="custname" placeholder="Enter the customer name">

            <br>

            <label>Customer Email</label> <input type="email" name="email" placeholder="abc@gmail.com">

            <br>

            <label>Mobile Number</label> <input type="text" name="mobile" placeholder="Enter the Mobile Number" max="10" pattern="[789]{1}[0-9]{9}" >

            <br>

            <label>Type of Broadband</label>

                <select name="conntype" name="conntype" id="connectiontype" value="connectiontype">

                    <option value="Pre">Pre</option>

                    <option value="Post">Post</option>

                </select>

            <br>

            <label>Scheme Name</label> 

            <input type="radio" name="scheme" id="scheme1" value="Local">Local

            <input type="radio" name="scheme" id="scheme2" value="STD">STD

            <input type="radio" name="scheme" id="scheme3" value="FullTalkTime">FullTalkTime

            <br>

            <label>Connection Duration</label> <input type="number" name="duration" id="duration" min=1 max=12>

            <br><br>

            <input type="button" value="Calculate Bill Amount" name="submit" onclick="TotalRental()" >

            <button type="reset" value="reset" name="clear">Reset</button>


            <div id="result" name="result"></div><br> 


        </form>

        <br>

        <p>Rental Cost Table</p>

        <table border="1" class="center" id="rentalcost" value="renalcost" >

            <tr>

                <td><b>Connection Type</b></td>

                <td><b>Call Limit</b></td>

                <td><b>Monthly Rental</b></td>

            </tr>

            <tr>

                <td>Pre</td>

                <td>500</td>

                <td>75</td>

            </tr>

            <tr>

                <td>Post</td>

                <td>Unlimited</td>

                <td>150</td>

            </tr>

        </table>

        <script>

            function TotalRental()

            

            {

               var month=document.getElementById("duration").value;

                var conn=document.getElementById("connectiontype");

                var ctt=conn.options[conn.selectedIndex].value;

                var cm=0;

                var mr=0;

                

                    if(document.getElementById("scheme1").checked)

                    {

                        cm=200;

                    }

                    if(document.getElementById("scheme2").checked)

                    {

                      cm=350;

                    }

                    if(document.getElementById("scheme3").checked)

                    {

                      cm=500;

                    }

                    if(ctt=="Pre")

                    {

                        mr=75;

                    }

                    if(ctt=="Post")

                    {

                        mr=150;

                    }

                var resultt=((month*cm)+mr);

                document.getElementById("result").innerHTML= "The Total Monthly Rental Cost is Rs. "+resultt;

               

            }

            

        </script>

    </body>

</html>


Comments

Post a Comment

Popular posts from this blog

Feed-Back Details: CTS CSD JS Mandatory Hands-on 3

Image
  Feed-Back Details: CTS CSD JS Mandatory Hands-on 3 index.html <!DOCTYPE html> <html> <head>     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>     <title></title>   </head>   <body>    <h2>Feedback for the ART OF LIVING session</h2> <table>     <tr> <td>Enter the Feedback:</td> <td><textarea name="feedback" id=feedback rows="4" cols="40"></textarea></td> </tr> <tr> <td colspan="2"><input type="button" name="create" id="create" value="Add Feedback" onclick="addFeedback();" /></td> </tr> <tr> <td colspan="2"><input type="button" name="view" id="view" value="View Feedback" onclick="displayFeedback();" /></td> </tr> </t...
Read more

Bill Calculator: CTS CSD JS MANDATORY HANDS-ON 3

Image
 Bill Calculator: CTS CSD JS MANDATORY HANDS-ON 3 index.html <!DOCTYPE html> <html>     <head>         <title>Bill Calculator</title>         <link rel="stylesheet" type="text/css" href="billcalc.css">     </head>     <body>         <h1>Bill Calculator</h1>         <form onsubmit="return calculateTotalPrice();">         <table>             <tr>                 <td>Product Name</td>                 <td><input type="text" id="productName" placeholder="Product Name" required></td>             </tr>             <tr>                 ...
Read more