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.
ReplyDelete