ACTB Connection Portal Cognizant Handson Program
ACTB Limited offers prepaid and postpaid connections for their customers. They have planned for various schemes to be offered for the customers opting for these connections.
Create a webpage “Connection.html” that has the following fields.
Note: Every tag has been given a mark. Make sure the element names are correct
| SNO | LABEL NAME | COMPONENT NAME | DESCRIPTION |
| 1 | Customer Name | custname | To enter the name of the customer. The text “Enter the customer name” should be displayed by default in the text box. While entering the name, this text should disappear |
| 2 | Customer Email | To enter the email-id of the customer. The text “abc@gmail.com” should be displayed by default in the text box. While entering the e-mail, this text should disappear. This field should accept a valid email. | |
| 3 | Telephone/ Mobile Number | mobile | To enter the mobile number. The mobile number should accept only digits. The text “Enter the Mobile Number” should be displayed by default in the text box. It should contain 10 digits and start with 9/8/7. Input type must be ‘text’. |
| 4 | Connection Type | conntype | Select the connection type using drop down with id attribute as “Pre” and “Post”. The attribute id needs to be “connectiontype” |
| 5 | Scheme Name | scheme | The scheme options are displayed in radio button and the schemes are Local, STD and FullTalkTime. Have the scheme id attributes as scheme1, scheme2 and scheme3 respectively. |
| 6 | Connection Duration | duration | The connection duration can be taken for any number of months, Assume min value is 1 and max value is 12. |
| 7 | Connection Bill Amount | submit | On clicking this button, the connection bill amount should be calculated. Input type must be ‘submit’. |
| 8 | Reset | clear | On clicking this button, all fields should be reset. Input type must be ‘reset’. |
RULES/CONSTRAINTS : All validations should be based on HTML 5 (Do Not use Java Script)
. The component name should be same as given above.
· All fields are mandatory.
· Customer name should contain only alphabets and space.
· Mobile Number should be of 10 digits and should start with 9/8/7.
. The Connection Type needs to be Pre or Post.
. The scheme names are Local, STD and FullTalkTime.
. The Connection Duration can be specified ranging from 1 to 12 months.
Refer the below table for the scheme costs
Scheme Chart Table
| Scheme | Cost per month |
| Local | 200 |
| STD | 350 |
| FullTalkTime | 500 |
Use JavaScript for doing the below calculation:
On clicking the Connection Bill Amount button, the monthly rental cost has to be displayed based on the Connection Type as in the Rental Cost Table given below. The available options for connection type are Pre and Post. Refer the table below for monthly rental cost for the connection.
Rental Cost Table
| Connection Type | Call Limit | Monthly Rental |
| Pre | 500 | 75 |
| Post | Unlimited | 150 |
The bill amount has to be calculated and displayed as “The Total Monthly Rental Cost is Rs. ”+ Total Monthly Rental Cost, in a div tag. The div tag name should be “result”.
Use the following formula to calculate the Total Monthly Rental Cost:
Total Monthly Rental Cost = ( duration * Cost per month ) + Monthly Rental
Connection.html
<!DOCTYPE HTML>
<html>
<head>
<style>
body{background-color:#EED426}
h1{color:#006666;
font-family:verdana;
text-align:center;}
div{
text-align: center;
}
</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>
