Scribd
Upload
12 views5 pages

My Assignment

Here is my Assignment of Web Development

Uploaded by

inoxentperson001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views5 pages

My Assignment

Here is my Assignment of Web Development

Uploaded by

inoxentperson001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Mark Chapman

Roll # 30944
=====================================================================================

Assignment # 3
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Billing System</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.container {

width: 630px;

border: 1px solid #000;

padding: 20px;

background-color: #fff;

h2 {

text-align: center;

color: green;
margin: 0 0 20px;

table {

width: 100%;

border-collapse: collapse;

margin-bottom: 20px;

th, td {

padding: 8px;

text-align: center;

border: 1px solid #ccc;

th {

background-color: #e0f7ff;

color: #333;

.total, .gst, .grand-total {

text-align: right;

font-weight: bold;

margin-right: 10px;

.btn-update {

display: block;

width: 100%;

padding: 10px;

font-size: 16px;

background-color: #ff4d4d;

color: #fff;

border: none;

cursor: pointer;

transition: background-color 0.3s;


}

.btn-update:hover {

background-color: #cc0000;

.data{

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

</style>

</head>

<body>

<div class="container">

<h2>Billing System</h2>

<table>

<thead>

<tr>

<th>S.No.</th>

<th>Item</th>

<th>Unit Cost (Rs.)</th>

<th>Quantity</th>

<th>Cost (Rs.)</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Eritromycin 100 mg</td>

<td>58</td>
<td><input type="number" value="1" min="1" id="qty1" onchange="calculateTotal()"></td>

<td id="cost1">58</td>

</tr>

<tr>

<td>2</td>

<td>Femramycin 500 mg</td>

<td>46</td>

<td><input type="number" value="2" min="1" id="qty2" onchange="calculateTotal()"></td>

<td id="cost2">92</td>

</tr>

<tr>

<td>3</td>

<td>Oximycin 2 mg</td>

<td>1090</td>

<td><input type="number" value="3" min="1" id="qty3" onchange="calculateTotal()"></td>

<td id="cost3">3270</td>

</tr>

</tbody>

</table>

<div class="data">

<div class="total">Total Rs: <span id="total">3420</span></div>

<div class="gst">GST at 15%: <span id="gst">513</span></div>

<div class="grand-total">Grand Total Rs: <span id="grandTotal">3933</span></div>

</div>

<button class="btn-update" onclick="calculateTotal()">Update Grand Total</button>

</div>

<script>

function calculateTotal() {

const unitPrices = [58, 46, 1090];

let total = 0;
for (let i = 0; i < unitPrices.length; i++) {

const quantity = parseInt(document.getElementById(qty${i + 1}).value);

const cost = unitPrices[i] * quantity;

document.getElementById(cost${i + 1}).innerText = cost;

total += cost; }

document.getElementById('total').innerText = total;

const gst = total * 0.15;

document.getElementById('gst').innerText = gst.toFixed(2);

const grandTotal = total + gst;

document.getElementById('grandTotal').innerText = grandTotal.toFixed(2);

} // Initial calculation on load

calculateTotal();

</script></body></html>

Output:

You might also like