Price
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Shop Item</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="item">
<img src="item-image.jpg" alt="Item Image">
<h2>Product Name</h2>
<p>Description of the product goes here...</p>
<form>
<fieldset>
<legend>Color:</legend>
<label><input type="radio" name="color" value="red" onclick="updatePrice()"> Red</label>
<label><input type="radio" name="color" value="blue" onclick="updatePrice()"> Blue</label>
</fieldset>
<fieldset>
<legend>Size:</legend>
<label><input type="radio" name="size" value="S" onclick="updatePrice()"> S</label>
<label><input type="radio" name="size" value="M" onclick="updatePrice()"> M</label>
<label><input type="radio" name="size" value="L" onclick="updatePrice()"> L</label>
<label><input type="radio" name="size" value="XL" onclick="updatePrice()"> XL</label>
</fieldset>
</form>
<p class="price" id="price">$20.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<script>
function updatePrice() {
var priceElement = document.getElementById("price");
var color = document.querySelector('input[name="color"]:checked').value;
var size = document.querySelector('input[name="size"]:checked').value;
// Example: add ₹300 for each size increase
var sizePrice = size === "S" ? 0 : (size === "M" ? 300 : (size === "L" ? 600 : 900));
// Example: add ₹600 for the red color
var colorPrice = color === "red" ? 600 : 0;
var totalPrice = basePrice + sizePrice + colorPrice;
priceElement.textContent = "₹" + totalPrice.toFixed(2);
}
</script>
</body>
</html>