From 78067fe474ce8b12e34ab0ec7f3e7e790c6b6aed Mon Sep 17 00:00:00 2001
From: sagarswastik <70539656+sagarswastik@users.noreply.github.com>
Date: Wed, 5 May 2021 17:10:25 +0530
Subject: [PATCH] Update Connection.html

---
 .../ACTB Connection Portal/Connection.html    | 284 ++++++------------
 1 file changed, 95 insertions(+), 189 deletions(-)
diff --git a/Dashboard/Use Interface Design and Soft Skills/HTML5, CSS3/ACTB Connection Portal/Connection.html b/Dashboard/Use Interface Design and Soft Skills/HTML5, CSS3/ACTB Connection Portal/Connection.html
index 1f3308b..8680269 100644
--- a/Dashboard/Use Interface Design and Soft Skills/HTML5, CSS3/ACTB Connection Portal/Connection.html	
+++ b/Dashboard/Use Interface Design and Soft Skills/HTML5, CSS3/ACTB Connection Portal/Connection.html	
@@ -1,190 +1,96 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ACTB Connection Portal</title>
-    <style>
-        body {
-            background-color: #EED426;
-        }
-
-        h1 {
-            color: #006666;
-            font-family: verdana;
-            text-align: center;
-        }
-
-        div {
-            text-align: center;
-        }
-    </style>
-</head>
-
-<body>
-    <h1>ACTB Connection Portal</h1>
-    <table>
-        <tr>
-            <td>
-                <label for="custname">Customer Name</label>
-            </td>
-            <td>
-                <input type="text" id="custname" name="custname" placeholder="Enter the customer name" required>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="email">Customer Email</label>
-            </td>
-            <td>
-                <input type="email" id="email" name="email" placeholder="abc@gmail.com" required>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="mobile">Mobile Number</label>
-            </td>
-            <td>
-                <input type="text" id="mobile" name="mobile" placeholder="Enter the Mobile Number" maxlength="10"
-                    max="9999999999" min="7000000000" required>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="conntype">Type of Broadband</label>
-            </td>
-            <td>
-                <select name="conntype" id="connectionType" required>
-                    <option id="Pre" value="Pre">Pre</option>
-                    <option id="Post" value="Post">Post</option>
-                </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="scheme">Scheme Name</label>
-            </td>
-            <td>
-                <input type="radio" name="scheme" id="scheme1" value="Local" required>
-                <label for="scheme1">Local</label>
-                <input type="radio" name="scheme" id="scheme2" value="STD" required>
-                <label for="scheme2">STD</label>
-                <input type="radio" name="scheme" id="scheme3" value="FullTalkTime" required>
-                <label for="scheme3">FullTalkTime</label>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="duration">Connection Duration</label>
-            </td>
-            <td>
-                <input type="number" id="duration" name="duration" min="1" max="12" required>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <button id="submit" name="submit" onclick="calculateRent()">Connection Bill Amount</button>
-            </td>
-            <td>
-                <button id="clear" name="clear" onclick="clearForm()">Reset</button>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <div id="result" name="result"></div>
-            </td>
-        </tr>
-    </table>
-    <table id="rentalcost">
-        <caption>Rental Cost Table</caption>
-        <thead>
-            <tr>
-                <th>Connection Type</th>
-                <th>Call Limit</th>
-                <th>Monthly Rental</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Pre</td>
-                <td>500</td>
-                <td>75</td>
-            </tr>
-            <tr>
-                <td>Post</td>
-                <td>Unlimited</td>
-                <td>150</td>
-            </tr>
-        </tbody>
-    </table>
-    <script>
-        var _name = document.getElementById("custname");
-        var _email = document.getElementById("email");
-        var _mobile = document.getElementById("mobile");
-        var _connectionType = document.getElementById("connectionType");
-        var _scheme1 = document.getElementById("scheme1");
-        var _scheme2 = document.getElementById("scheme2");
-        var _scheme3 = document.getElementById("scheme3");
-        var _duration = document.getElementById("duration");
-        var _result = document.getElementById("result");
-
-        var emailPattern = /^.+@.+\..+$/;
-        var mobilePattern = /^[789]\d{9}$/;
-
-        function calculateRent() {
-            var name = _name.value;
-            var email = _email.value;
-            var mobile = _mobile.value;
-            var connectionType = _connectionType.value;
-            var scheme1 = _scheme1.checked;
-            var scheme2 = _scheme2.checked;
-            var scheme3 = _scheme3.checked;
-            var duration = _duration.value;
-
-            if (
-                name &&
-                emailPattern.test(email) &&
-                mobilePattern.test(mobile) &&
-                connectionType &&
-                (scheme1 || scheme2 || scheme3) &&
-                duration
-            ) {
-                var monthlyRental = 0;
-                var costPerMonth = 0;
-
-                if (connectionType === "Pre") {
-                    monthlyRental = 75;
-                } else if (connectionType === "Post") {
-                    monthlyRental = 150;
-                }
-
-                if (scheme1) {
-                    costPerMonth = 200;
-                } else if (scheme2) {
-                    costPerMonth = 350;
-                } else if (scheme3) {
-                    costPerMonth = 500;
-                }
-
-                var totalCost = (duration * costPerMonth) + monthlyRental;
-                console.log(totalCost);
-                _result.innerText = "The Total Monthly Rental Cost is Rs. " + totalCost;
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+        body{background-color:#EED426}
+            h1{color:#006666;
+            font-family:verdana;
+            text-align:center;}
+            div{
+             text-align: center;   
             }
-        }
-
-        function clearForm() {
-            _name.value = "";
-            _email.value = "";
-            _mobile.value = "";
-            _connectionType.value = "";
-            _scheme1.checked = false;
-            _scheme2.checked = false;
-            _scheme3.checked = false;
-            _duration.value = "";
-            _result.innerText = "";
-        }
-    </script>
-</body>
-
-</html>
\ No newline at end of file
+        </style>
+        <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>
+        </head>
+        <body>
+        <h1>ACTB Connection Portal</h1>
+        
+        <form>
+        <label>Customer Name</label><input type="text" name="custname" id="name" placeholder="Enter the customer name" required>
+        <br>
+        <label>Customer Email</label><input type="email" name="email" placeholder="abc@gmail.com" required>
+        <br>
+        <label>Mobile Number</label><input type="text" name="mobile" placeholder="Enter the Mobile Number" max="10" pattern="[789]{1}[0-9]{9}" required>
+        <br>
+        <label>Type of Broadband</label><select name="conntype" id="connectiontype" value="connectiontype" required>
+                <option id="Pre" value="Pre">Pre</option>
+                <option id="Post" 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" required><br>
+        <span>
+        <input type="button" value="calculate bill" onclick="TotalRental()" name="submit">
+        <button type="Reset" name="clear">Reset</button></span><br>
+        
+        <div id="result" name="result"></div><br> 
+        </form>
+        <table name="Rental Cost Table" border="1" id="rentalcost" value="rentalcost">
+            
+            <tr>
+                <td><strong>Connection Type</strong></td>
+                <td><strong>Call Limit</strong></td>
+                <td><strong>Monthly Rental</strong></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>
+            </body>
+            </html>

- Customer Name -	- -
- Customer Email -	- -
- Mobile Number -	- -
- Type of Broadband -	- -
- Scheme Name -	- - Local - - STD - - FullTalkTime -
- Connection Duration -	- -
- -	- -
- -
Connection Type	Call Limit	Monthly Rental
Pre	500	75
Post	Unlimited	150