Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Connection.html #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated Connection.html #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
284 changes: 95 additions & 189 deletions ...d/Use Interface Design and Soft Skills/HTML5, CSS3/ACTB Connection Portal/Connection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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="[email protected]" 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>
</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="[email protected]" 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>