<div id="register">
  <div id="ticket">
    <h1>Thank You!</h1>
    <table>
      
      <tbody id="entries">
        
        
        
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <th id="total">$0.00</th>
        </tr>
      </tfoot>
    </table>
  </div>
  <form id="entry">
    <input id="newEntry" autofocus placeholder="How Much?">
  </form>
</div>

body {
  background: #EEE;
  font-family: sans-serif;
  font-size: 20px;
  margin: 3em;
  padding: 0;
}
#register {
  width: 20em;
  margin: auto;
}
#ticket {
  background: white;
  margin: 0 1em;
  padding: 1em;
  box-shadow: 0 0 5px rgba(0,0,0,.25);
}
#ticket h1 {
  text-align: center;
}
#ticket table {
  font-family: monospace;
  width: 100%;
  border-collapse: collapse;
}
#ticket td, #ticket th {
  padding: 5px;
}
#ticket th {
  text-align: left;
}
#ticket td, #ticket #total {
  text-align: right;
}
#ticket tfoot th {
  border-top: 1px solid black;
}

#entry {
  background: #333;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,.25);
}
#entry input {
  width: 100%;
  padding: 10px;
  border: 1px solid black;
  text-align: right;
  font-family: sans-serif;
  font-size: 20px;
  box-shadow: inset 0 0 3px rgba(0,0,0,.5);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#entry input:focus {
  outline: none;
  border-color: rgba(255,255,255,.75);
}

var total = 0;
var newEntry = document.getElementById('newEntry');

/*when I submit the form: */
document.getElementById('entry').addEventListener('submit', enter);




function enter(){
  
  /* read the value of newEntry*/
  var price = parseFloat(newEntry.value);
  
  /*add the value to total*/
  total = total + price;
  
  /*add a new line with the value from newEntry*/
  writeRow(price);
  
  /*print the updated total with the new value*/
  document.getElementById('total').innerHTML = formatCurrency(total);
  
 /*clear the input field*/
  newEntry.value = '';
}

function writeRow(price){
  document.getElementById('entries').innerHTML = document.getElementById('entries').innerHTML + 
  "<tr><td></td><td>" + 
  formatCurrency(price) + 
  "</td></tr>"
}

function formatCurrency(general){
  general = parseFloat(general);
  return '$' + general.toFixed(2);
}