Philly Soda Tax Calculator

/Shane English for Spirit News

by Shane English

HTML

<!DOCTYPE HTML>
<html>

  <head>

    <script>
      function calculate() {

        var itemPrice = (document.purchaseData.price.value);
        var discountRate = parseFloat(document.purchaseData.ounces.value);
        var taxRate = .015 * parseFloat(document.purchaseData.ounces.value);

        var discount = (itemPrice * discountRate);
        var discountPrice = itemPrice - discount;
        var total = (itemPrice + taxRate);
        var weekDrinks = parseFloat(document.purchaseData.weekTotal.value);
        var weekTotal = (taxRate * (weekDrinks)).toFixed(2);
        var monthTotal = (taxRate * (weekDrinks) * (52 / 12)).toFixed(2);
        var yearTotal = (taxRate * (weekDrinks) * 52).toFixed(2);

        document.purchaseData.discount.value = " $ " + (taxRate).toFixed(2);
        document.purchaseData.cost.value = " $ " + (parseFloat(itemPrice) + (taxRate)).toFixed(2);
        document.purchaseData.weekCost.value = " $ " + (parseFloat(weekTotal)).toFixed(2);
        document.purchaseData.monthCost.value = " $ " + (parseFloat(monthTotal)).toFixed(2);
        document.purchaseData.yearCost.value = " $ " + (parseFloat(yearTotal)).toFixed(2);
      }

    </script>
  </head>

  <body>
    <h3>
        Philadelphia Soda Tax
      </h3>
    <h4>Calculate how much the Soda Tax will cost you:</h4>
    <form name="purchaseData" id="purchaseData">
      <table width="100%" border="0" cellpadding="4">
        <tr>
          <td style="text-align:left">
            <cite>How much is your drink?</cite>
            <p>
              <input type="number" step="any" name="price" size="20" maxlength="25" />
            </p>
          </td>
        </tr>
        <tr>
          <td style="text-align:left">
            <cite>How many sugary sweet taxable ounces?</cite>
            <p>
              <input type="number" step="any" name="ounces" size="20" maxlength="25" value="0" />
            </p>
          </td>
        </tr>
        <tr>
          <td style="text-align:...