Here’s a basic structure you can use to create a GST calculator using HTML:
<!DOCTYPE html> <html> <head> <title>GST Calculator</title> </head> <body> <h1>GST Calculator</h1> <form> Enter the price: <input type="text" id="price"><br> <input type="radio" name="gst" value="5"> 5% GST<br> <input type="radio" name="gst" value="12"> 12% GST<br> <input type="radio" name="gst" value="18"> 18% GST<br> <input type="radio" name="gst" value="28"> 28% GST<br> <button type="button" onclick="calculate()">Calculate</button> </form> <p>Total price: <span id="total"></span></p> <script> function calculate() { // Get the price and GST rate var price = document.getElementById("price").value; var gstRate = document.querySelector('input[name="gst"]:checked').value; // Calculate the GST var gst = price * gstRate / 100; // Calculate the total price var total = Number(price) + Number(gst); // Display the total price document.getElementById("total").innerHTML = total; } </script> </body> </html>
This HTML code creates a form with text input for the price and a set of radio buttons for selecting the GST rate. When the user clicks the “Calculate” button, the calculate()
function is called, which gets the price and GST rate from the form, calculates the GST and total price, and displays the total price.