<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test Water Bill Calculator</title> <script> function calc() { var size = parseFloat(document.getElementById('size').value); var consumption = parseFloat(document.getElementById('consumption').value); var result = 0; if(consumption < 11) { result = size; document.getElementById('result').value = result; } else if(consumption > 10 && consumption < 21) { result = ((consumption - 10) * 24.40) + size; document.getElementById('result').value = result.toFixed(2); } else if(consumption > 20 && consumption < 31) { result = ((consumption - 20) * 26.55) + 244.00 + size; document.getElementById('result').value = result.toFixed(2); } else if(consumption > 30 && consumption < 41) { result = ((consumption - 30) * 29.70) + 244.00 + 265.5 + size; document.getElementById('result').value = result.toFixed(2); } else if(consumption >= 41) { result = ((consumption - 40) * 33.80) + 244.00 + 265.5 + 297 + size; document.getElementById('result').value = result.toFixed(2); } } </script> </head> <body> <label>Meter Size</label> <select id="size"> <option value="229.00">1/2" Meter Size</option> <option value="366.40">3/4" Meter Size</option> <option value="732.80">1" Meter Size</option> <option value="4580.00">2" Meter Size</option> <option value="8244.00">3" Meter Size</option> <option value="16488.00">4" Meter Size</option> </select> <label>Consumption</label> <input type="text" id="consumption"> <button class="button" onclick="calc();">Compute</button> <input type="text" id="result"/> </body> </html>