jin's pizza shoppe

from https://github.com/jinjin8/pizza-shop

by edwardsharp

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="jumbotron">
    <h1>P i z z a</h1>
  </div>

  <div class="pizza-receipt">
    <h1><span id="total-text"></span><span id="cost"></span></h1>
    <!-- <h3><span class="toppings"></span></h3> -->
    <!-- ...i guess the form elements already list these thingz -->
  </div>

  <div class="order-form">
    <form id="pizza-order">

      <select class="form-control" id="sizes">
        <option value="small">small</option>
        <option value="medium" selected>medium</option>
        <option value="large">large</option>
      </select>

      <select class="form-control" id="meats">
        <option>Meat Topping</option>
        <option value="pepperoni">pepperoni</option>
        <option value="sausage">sausage</option>
        <option value="canadian bacon">canadian bacon</option>
      </select>

      <select class="form-control" id="veggies">
        <option>Veggie Topping</option>
        <option value="olives">olives</option>
        <option value="pepperoncini">pepperoncini</option>
        <option value="pineapple">pineapple</option>
      </select>

      <button type="submit" class="btn btn outline center-block">O R D E R</button>
    </form>
  </div>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
html,
body {
  margin: 0;
  padding: 0;
}

JavaScript

/*
function Pizza(size, meat, veggie) {
  this.size = [];
  this.meat = [];
  this.veggie = [];
  this.order = [];
};
*/
// so go ahead and make these global variables, also functions, generally, don't start with a capitol letter. also, let's wrap each one of these arrays up in a single object.
// so something like this: 
/*
var size = []
  , meat = []
  , veggie = []
  , order = []
  ; 
*/
// i'm going to suggest that we try to create an object with as much constant data that we can think of. also let's put the order arrays from above (BUT * let's use a integer value since you are using <select> elements that only allow a user to pick one thing. if you used <input type="checkbox"> then an array would make sense since multiple things can be selected). so:
var pizza = {
  order: {
    sizes: 8, //since this field is 'required' and 'medium' selected by default using medium's price
    meats: 0,
    veggies: 0
  },
  sizes: {
    small: 8,
    medium: 12,
    large: 16
  },
  meats: {
    pepperoni: 2,
    sausage: 3,
    'canadian bacon': 4
  },
  veggies: {
    olives: 2,
    pepperoncini: 1,
    pineapple: 3
  }
}

/*
this.hotPizza = function() {
  return this.order === size + meat + veggie;
};
*/
// not quite sure what's going on here or why you'd want to use 'this'. also '===' is a comparison, so this function returns true or false. 

/*
Pizza.prototype.size = function() {
  var total = 0;
  if (this.size === "small") {
    total += 8;
  } else if (this.size === "medium") {
    total += 12;
  } else if (this.size === "large") {
    total += 16;
  };
  return total;
};

Pizza.prototype.meat = function() {
  var total = 0;
  if (this.meat === "pepperoni") {
    total += 2;
  } else if (this.meat === "sausage") {
    total += 3;
  } else if (this.meat === "canadian bacon") {
    total += 4;
  };
  return total;
};

Pizza.prototype.veggie = function() {
  var total = 0;
  if (this.veggie === "olives") {
    total += 2;
  } else if (this.veggie === "pepperoncini")...