## EXP.NO: 06
### TITLE
Develop a Webpage Using Scripting Languages with the Help of CSS
### AIM
To implement an Interactive Product Price Calculator using JavaScript that dynamically calculates and displays the total bill based on product selection, quantity, and additional service options.
### ALGORITHM
1. In the external stylesheet `styles.css`, apply the following styles:
* Set the background color of the body to `#f4f6f9`.
* For the `.container` class, set:
* `background-color` to `#ffffff`
* `padding` to `20px`
* Style the button element by setting:
* `background-color` to `#1e3a8a`
* `color` to `#ffffff`
2. Create a JavaScript function named `calculateTotal()`.
3. Inside the function, read the selected product price from the dropdown element with id `product` using its `value` attribute.
4. Read the quantity value from the input field with id `quantity` using its `value` attribute.
5. Convert both product price and quantity to numeric values.
6. Calculate the initial total by multiplying:
* Product price × quantity
7. Check whether the checkbox with id `warranty` is selected using the `checked` attribute.
* If selected, add 2000 to the total amount.
8. Check whether the checkbox with id `delivery` is selected using the `checked` attribute.
* If selected, add 500 to the total amount.
9. Display the final total amount inside the element with id `total` using the `innerText` property.
10. When the “Calculate Total” button is clicked, the `calculateTotal()` function should execute, compute the total price, and display the result on the page.
### PROGRAM
The record uses three files: `index.html`, `styles.css`, and `script.js`.
1. HTML — `index.html`
```
Product Price Calculator
Electronics Shop - Price Calculator
Extended Warranty (₹2000)
Home Delivery (₹500)
Total Price: ₹0
```
2. CSS — `styles.css`
```
/* Add your external CSS here */
/* Set background color for the page */
body {
background-color: #f4f6f9;
}
/* Container styling */
.container {
background-color: #ffffff;
padding: 20px;
}
/* Button styling */
button {
background-color: #1e3a8a;
color: #ffffff;
}
```
3. JavaScript — `script.js`
```
function calculateTotal() {
// Read product price
var productPrice = Number(document.getElementById("product").value);
// Read quantity
var quantity = Number(document.getElementById("quantity").value);
// Calculate initial total
var total = productPrice * quantity;
// Add warranty cost
if (document.getElementById("warranty").checked) {
total = total + 2000;
}
// Add delivery cost
if (document.getElementById("delivery").checked) {
total = total + 500;
}
// Display final total
document.getElementById("total").innerText = total;
}
```
### OUTPUT
The webpage displays an electronics shop price calculator with a product dropdown, quantity input, warranty and delivery checkboxes, a Calculate Total button, and the total price.
Example: If Laptop, quantity 1, Warranty, and Delivery are selected:
Total Price: ₹52500
### RESULT
The product price calculator was successfully developed using HTML, CSS, and JavaScript, and it correctly calculates and displays the total price based on the selected options.