mbrock/pricey.html

## pricey.html
<!doctype html>
<html>
  <head>
    <title>Pricey</title>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        var stuff = {
          "Cinnnabon Classic": 3.79,
          "Caramel Pecanbon": 4.29,
          "Cinnabon Stix 5ct": 3.49,
          "Cinnabon Bitens 4ct": 3.59
        };

        var stuffList = document.getElementById("stuff"),
            totalSpan = document.getElementById("total-span"),
            resetButton = document.getElementById("total-reset"),
            totalValue = 0.0;

        for (thingName in stuff) {
          addThing(thingName);
        }

        resetButton.addEventListener("click", function() {
          setTotal(0);
        });

        function setTotal(newTotal) {
          totalValue = newTotal;
          totalSpan.firstChild.nodeValue = totalValue.toFixed(2);
        }

        function addThing(thingName) {
          var price = stuff[thingName];
          var text = thingName + " (" + price + ")";

          var thing = document.createElement("li");
          var button = document.createElement("button");

          button.appendChild(document.createTextNode("+"));

          thing.appendChild(button);
          thing.appendChild(document.createTextNode(text));

          button.addEventListener("click", function() {
            setTotal(totalValue + price);
          });

          stuffList.appendChild(thing);
        }
      });
    </script>
    <style type="text/css">
      body {
        font-size: x-large;
      }
    </style>
  </head>
  <body>
    <section id="stuff-section">
      <ul id="stuff">
      </ul>
    </section>
    <section id="total-section">
      Total:
      <span id="total-span">0</span>
      <button id="total-reset">Reset</button>
    </section>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Pricey</title>
	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
	var stuff = {
	"Cinnnabon Classic": 3.79,
	"Caramel Pecanbon": 4.29,
	"Cinnabon Stix 5ct": 3.49,
	"Cinnabon Bitens 4ct": 3.59
	};

	var stuffList = document.getElementById("stuff"),
	totalSpan = document.getElementById("total-span"),
	resetButton = document.getElementById("total-reset"),
	totalValue = 0.0;

	for (thingName in stuff) {
	addThing(thingName);
	}

	resetButton.addEventListener("click", function() {
	setTotal(0);
	});

	function setTotal(newTotal) {
	totalValue = newTotal;
	totalSpan.firstChild.nodeValue = totalValue.toFixed(2);
	}

	function addThing(thingName) {
	var price = stuff[thingName];
	var text = thingName + " (" + price + ")";

	var thing = document.createElement("li");
	var button = document.createElement("button");

	button.appendChild(document.createTextNode("+"));

	thing.appendChild(button);
	thing.appendChild(document.createTextNode(text));

	button.addEventListener("click", function() {
	setTotal(totalValue + price);
	});

	stuffList.appendChild(thing);
	}
	});
	</script>
	<style type="text/css">
	body {
	font-size: x-large;
	}
	</style>
	</head>
	<body>
	<section id="stuff-section">
	<ul id="stuff">
	</ul>
	</section>
	<section id="total-section">
	Total:
	<span id="total-span">0</span>
	<button id="total-reset">Reset</button>
	</section>
	</body>
	</html>