<!DOCTYPE html>
<html>
<head>
<title>Cake Order</title>

<style>
body{
  font-family:Arial;
  background:lightyellow;
  text-align:center;
}

.box{
  background:white;
  width:300px;
  margin:50px auto;
  padding:20px;
  border:1px solid gray;
}

button{
  background:green;
  color:white;
  padding:8px;
  border:none;
}

button:hover{
  background:darkgreen;
}
</style>

</head>
<body>

<div class="box">

<h2>Cake Order</h2>

Cake Type:
<select id="cake">
  <option value="500">Chocolate - 500</option>
  <option value="400">Vanilla - 400</option>
  <option value="600">Strawberry - 600</option>
</select><br><br>

Quantity:
<input type="number" id="qty"><br><br>

Extras:<br>
<input type="checkbox" id="cream"> Extra Cream (50)<br>
<input type="checkbox" id="candle"> Candle (20)<br><br>

<button onclick="calc()">Order</button>

<h3 id="res"></h3>

</div>

<script>
function calc(){
  let price = document.getElementById("cake").value;
  let qty = document.getElementById("qty").value;

  let total = price * qty;

  if(document.getElementById("cream").checked)
    total += 50;

  if(document.getElementById("candle").checked)
    total += 20;

  document.getElementById("res").innerHTML = "Total: ₹" + total;
}
</script>

</body>
</html>
