Bill Calculator: CTS CSD JS MANDATORY HANDS-ON 3
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>
<td>Product Price in Rs.</td>
<td><input type="number" id="price" placeholder="Product Price" required></td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="number" id="qty" placeholder="Enter quantity" min="1" required></td>
</tr>
<tr>
<td>Total Price in Rs.</td>
<td><output id="totalprice" for="price qty"></output></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
<script>
function calculateTotalPrice()
{
var p=document.getElementById("price").value;
var q=document.getElementById("qty").value;
var res=p*q;
document.getElementById("totalprice").innerHTML=res;
return false;
}
</script>
</body>
</html>
bilcalc.css
h1{
text-align:center;
color:#FF00FF;
font-style:italic;
font-weight:bold;
}
table{
text-align:left;
margin-left:35%;
border-spacing:10px;
border-width:10%;
border-style:solid;
background-color:#F899A4;
}
td{
border-style:ridge;
padding:10px;
}
Investing in energy-efficient technology has drastically reduced my LESCO bill, making my home greener and my wallet happier.
ReplyDeleteThe "Pesco rate per unit" refers to the cost charged by the Peshawar Electric Supply Company (PESCO) for the consumption of electricity, typically measured in kilowatt-hours (kWh). This rate can vary depending on factors such as consumption levels, time of use, and government regulations. Consumers are billed according to this rate, and it is subject to periodic changes based on energy tariffs set by regulatory bodies.
ReplyDeletepesco rate per unit