Vending Machine

index.html

<div class="wrapper clearfix">
 <div class="machine">
  <div class="box"> 
    <div class="window">
      <div class="square">
        <div class="option">
          <svg id="soda_pop" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
	.st0{fill:af0c1c;}
</style>
<g>
	<path class="st0" d="M394.3,455.4c0,0-0.1-0.1-0.1-0.1V89.7c0-11.1-17.8-42.7-26.6-57.7v-7.9c3.3-2.2,5.6-5.9,5.6-10.2
		c0-6.6-5.3-12-11.8-12.2C358.7,1.5,334.6,0,254.6,0c-78.3,0-98.5,1.5-101.4,1.8c-6.5,0.2-11.7,5.6-11.7,12.2c0,2.6,0.8,5,2.2,6.9
		V32c-8.8,15-26.6,46.6-26.6,57.7v368.6c0,0.2,0,0.4,0.1,0.5c0,0.3,0,0.6,0.1,0.9c0,0.3,0.1,0.5,0.2,0.7c0.1,0.2,0.1,0.5,0.2,0.7
		c0.1,0.3,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.4,0.4,0.7c0.1,0.2,0.3,0.4,0.5,0.6c0.2,0.2,0.3,0.4,0.5,0.6c0.2,0.2,0.4,0.4,0.6,0.5
		c0.2,0.2,0.4,0.3,0.6,0.5c0.3,0.2,0.5,0.3,0.8,0.5c0.1,0.1,0.3,0.2,0.4,0.3c1,0.5,6.6,3,16.1,6.3c-0.7,1.2-1.1,2.6-1.1,4v13.1
		c0,3.6,2.4,6.7,5.9,7.7c3.6,1,58.1,15.5,120.8,15.5c36.8,0,76.4-5,110.1-20.7c2.8-1.3,4.6-4.1,4.6-7.2v-10c0-1.4-0.4-2.6-1-3.8
		c4.2-1.5,8.4-3,12.7-4.6C393.9,464.1,395.9,459.5,394.3,455.4z M133,195.7c2.9-0.3,5.8-0.7,8.7-1.1c3.1-0.5,6.2-1.2,9.4-1.9
		c3.2-0.6,6.4-1.4,9.6-2.1c3.2-1,6.4-2,9.6-3c3.2-1.1,6.6-2,9.8-3.3c3.2-1.4,6.4-2.8,9.6-4.2c3.2-1.5,6.6-2.8,9.8-4.4
		c3.1-1.8,6.2-3.6,9.4-5.4c3.1-1.8,6.4-3.6,9.5-5.5c2.9-2.1,5.9-4.3,8.9-6.4c3-2.2,5.9-4.4,8.9-6.6c2.9-2.3,5.5-4.8,8.2-7.3
		c5-4.7,10-9.3,15-14l3.6-3.5l2.9-2.5c1.9-1.7,3.8-3.3,6.2-5c2.2-1.7,4.4-3.4,6.7-4.8c2.3-1.5,4.5-3.2,7-4.4
		c2.4-1.4,4.7-2.8,7.2-3.9c2.4-1.3,4.8-2.5,7.3-3.5c2.5-1.1,5-2.1,7.5-3l3.8-1.4l3.9-1.2c20.7-6.1,42.6-7.2,61.9-6.1
		c0.3,0,0.6,0,0.9,0.1v218.5c-7.2-1.9-14.7-3.5-22.9-4.5c-13.4-1.6-28.1-1.9-43.3,0.4c-3.8,0.5-7.6,1.1-11.4,2.1
		c-3.8,0.8-7.6,1.9-11.4,3.1c-7.6,2.2-15.1,5.2-22.3,8.8c-3.7,1.7-7.1,3.7-10.6,5.7c-3.6,1.9-6.8,4.2-10,6.5
		c-3.3,2.2-6.5,4.8-9.8,7.5l-4.9,4l-3.7,3.5c-4.8,4.5-9.5,9.1-14.2,13.6l-6.5,6.3l-6.9,5.7c-2.3,1.9-4.6,3.8-6.9,5.7
		c-2.4,1.8-4.8,3.4-7.2,5.1c-2.4,1.7-4.8,3.4-7.1,5.1c-2.4,1.6-4.9,3-7.4,4.6c-2.5,1.5-4.9,3-7.3,4.5c-2.5,1.3-5,2.6-7.5,3.9
		c-2.5,1.3-5,2.6-7.4,3.9c-2.5,1.1-5.1,2.1-7.5,3.3c-2.5,1.1-4.9,2.3-7.4,3.3c-0.6,0.2-1.2,0.4-1.8,0.7L133,195.7L133,195.7z
		 M158.5,38.2c0.7-1.2,1.1-2.6,1.1-4v-8.1h192.2v8.1c0,1.4,0.4,2.8,1.1,4c4,6.7,8.1,14,11.8,20.9c-5.2-1.2-10.6-2.2-16.3-3
		c-13.1-1.6-27.6-1.9-42.4,0.4c-3.7,0.5-7.5,1.1-11.2,2.1c-3.8,0.8-7.5,1.9-11.2,3.1c-7.5,2.2-14.8,5.2-21.8,8.8
		c-3.6,1.7-7,3.7-10.4,5.7c-3.5,1.9-6.6,4.2-9.8,6.5c-3.2,2.2-6.4,4.8-9.6,7.5l-4.8,4l-3.7,3.5c-4.7,4.5-9.3,9.1-14,13.6l-6.4,6.3
		l-6.8,5.7c-2.3,1.9-4.5,3.8-6.7,5.7c-2.3,1.8-4.7,3.4-7,5.1c-2.4,1.7-4.7,3.4-7,5.1c-2.4,1.6-4.8,3-7.2,4.6c-2.4,1.5-4.8,3-7.2,4.5
		c-2.5,1.3-4.9,2.6-7.4,3.9c-2.4,1.3-4.9,2.6-7.3,3.9c-2.5,1.1-5,2.1-7.4,3.3c-2.1,0.9-4.1,1.9-6.2,2.8V89.7
		C133.3,84.2,146.4,58.6,158.5,38.2z M133,453v-7.7c0.8-0.1,1.6-0.1,2.4-0.2c3.1-0.3,6.2-0.7,9.4-1.2c3.2-0.5,6.3-1.2,9.6-1.9
		c3.2-0.6,6.5-1.4,9.8-2.1c3.2-1,6.5-2,9.8-3c3.3-1.1,6.7-2,10-3.3c3.2-1.4,6.5-2.8,9.8-4.2c3.3-1.5,6.7-2.8,10-4.4
		c3.2-1.8,6.4-3.6,9.6-5.4c3.2-1.8,6.5-3.6,9.6-5.5c3-2.1,6-4.3,9-6.4c3-2.2,6-4.4,9.1-6.6c2.9-2.3,5.6-4.8,8.4-7.3
		c5.1-4.7,10.2-9.3,15.3-14l3.6-3.5l3-2.5c1.9-1.7,3.9-3.3,6.3-5c2.3-1.7,4.5-3.4,6.9-4.8c2.3-1.5,4.6-3.2,7.1-4.4
		c2.4-1.4,4.8-2.8,7.3-3.9c2.5-1.3,4.9-2.5,7.5-3.5c2.5-1.1,5.1-2.1,7.7-2.9l3.9-1.4l3.9-1.2c18.7-5.4,38.4-6.9,56.4-6.3v112.6
		C258.4,496.8,155.5,461.8,133,453z M149.3,280.5c0-17.8,7.6-35.2,20.1-48.2c8.9-9.4,19.6-16,32-19.7c9.4-2.8,16.3-2.5,18.7-1.6
		l-4.3,13.3c-2.8-0.7-8.7-0.5-16.2,1.7c-8.2,2.4-16,7.6-21.9,14.4c-7.5,8.9-12.4,21.1-12.4,33.6c0,14.4,7.4,23,24.3,18
		c6.2-1.9,12.6-4.9,17.2-8.4l1.4,11.7c-4.6,3.4-12.4,7.5-22.4,10.5C163.6,312.3,149.3,302.8,149.3,280.5z M238,290.3
		c21.1-6.3,35.9-28.7,35.9-49.7c0-13.7-8.8-23.1-25.5-18.2c-21.1,6.3-35.8,28.8-35.8,49.8C212.6,287,222.3,295,238,290.3z
		 M246.6,234.4c9-2.7,11.8,4.4,11.8,10.7c0,12.3-7.4,29.8-18.5,33.1c-7.5,2.2-12.1-2.4-12.1-10.9
		C227.9,255.8,234.8,237.9,246.6,234.4z M288.8,273.8l-14.9,4.4l17.3-95.5l14.8-4.4L288.8,273.8z M318.6,266.4
		c7.9-2.4,16-8.7,22.2-22l0.4-0.1c-0.5,5.5-1,10.6-1.1,14.3l13.8-4.1c-0.3-7.3,0.8-19.2,2.5-29l6.4-34.2c-4.7-0.1-12,0.8-18.7,2.8
		c-28.9,8.6-43.7,35.5-43.7,56.6C300.3,263.2,307.5,269.7,318.6,266.4z M340,206.7c2.7-0.8,4.6-1.1,6.1-1.2l-3.3,17.3
		c-2.9,16.7-11.3,27.8-18.2,29.9c-6.5,1.9-8.9-2.7-8.9-9.2C315.7,229.3,326.3,210.8,340,206.7z"/>
</g>
        </svg>
      </div> <!-- end .option -->
      <div class="identifier">
        <p>1</p>
        <p>$1.00</p>
      </div>
    </div> <!-- end .square -->
    <div class="square">
      <div class="option">
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3C49AF;}
	.st1{fill:#E5DB25;}
</style>
<path class="st0" d="M422.9,453.7c29.9-80.5,29.9-314.9,0-395.4l8.8-46.4c0.6-2.9-0.2-5.9-2.1-8.2c-1.9-2.3-4.7-3.6-7.7-3.6H90.2
	c-3,0-5.8,1.3-7.7,3.6s-2.7,5.3-2.1,8.2l8.8,46.4c-29.9,80.5-29.9,314.9,0,395.4l-8.8,46.4c-0.6,2.9,0.2,5.9,2.1,8.2
	c1.9,2.3,4.7,3.6,7.7,3.6h331.6c0,0,0,0,0,0c5.5,0,10-4.5,10-10c0-0.9-0.1-1.8-0.4-2.7L422.9,453.7z M409.8,20l-5.5,29.2H107.8
	L102.3,20H409.8z M106.5,69.2h299.1c26.4,78.1,26.4,295.5,0,373.6H106.5C80.1,364.7,80.1,147.3,106.5,69.2z M102.2,492l5.5-29.2
	h296.5l5.5,29.2H102.2z"/>
<path class="st1" d="M151.4,336.2C151.4,336.2,151.5,336.2,151.4,336.2c0.3,0,0.5,0.1,0.7,0.1c0.8,0.1,1.6,0.1,2.4,0.1
	c6.7,0,16.7-3,32.4-7.9c15.2-4.7,32.5-10.1,43.8-10.7c1.1-0.1,2.2-0.1,3.3-0.1c9.2,0,18.3,2.1,28,4.4c11.6,2.7,24.8,5.8,40.5,5.8
	c12.8,0,44.7-2.3,65.5-24.1c12.3-12.8,18.1-29.7,17.3-50.2c-2.3-56.1-63.1-80.3-93.7-80.3c-46.4,0-72.2,38.2-81.4,63.1
	c-62.4,9.1-83.5,59.7-83.5,73C126.7,323.8,136.1,334,151.4,336.2z M291.6,193.3c20.9,0,71.9,17.6,73.7,61.1
	c0.6,14.8-3.3,26.8-11.8,35.5c-15.9,16.6-43.1,17.9-51.1,17.9c-13.3,0-24.8-2.7-35.9-5.2c-10.4-2.4-21.1-4.9-32.5-4.9
	c-1.5,0-3,0-4.4,0.1c-8.4,0.5-18.5,2.8-28.8,5.7c16.1-22.9,25-50.1,26.5-55c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1
	C228,246.1,243.6,193.3,291.6,193.3z M202.3,258.4c-9.5,22.9-27.4,54.7-49,57.8c-6.6-1.2-6.7-4.5-6.7-6.7
	C147,304.3,159.8,269.5,202.3,258.4z"/>
        </svg>
      </div> <!-- end .option -->
      <div class="identifier">
        <p>2</p>
        <p>$0.50</p>
      </div>
    </div> <!-- end .square -->
    <div class="square">
      <div class="option">
        <svg id="toffee" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3CAF3C;}
</style>
<path class="st0" d="M502.1,124.4c-3.9-3.1-8.4-4.3-13-3.7c-1.1-0.1-3.3-2.2-3.4-3.2l0.9-6.2c0.8-5.7-1.5-11.9-6.2-16.6
	c-4.7-4.7-10.9-7.1-16.6-6.2l-6.1,0.9c-1.1-0.1-3.3-2.2-3.4-3.2l0.9-6.2c0.8-5.7-1.5-11.9-6.2-16.6c-4.7-4.7-10.9-7.1-16.6-6.2
	l-6.1,0.9c-1.1-0.1-3.3-2.2-3.4-3.2l0.9-6.2c0.8-5.7-1.5-11.9-6.2-16.6c-4.7-4.7-10.9-7-16.6-6.2l-6.1,0.9c-1.1-0.1-3.3-2.2-3.4-3.2
	l0.2-1.1c0.7-4.6-0.6-9.1-3.5-12.8c-4.8-6.1-13.1-8.8-19.2-9.4c-7.9-0.7-15.2,1.8-21.1,7.1c-6.7,6.1-10.6,15-12,20.1
	c-4.1,7.3-26.8,49.7-36.1,117.4L286,130.9c-15.2-15.1-38.8-16.6-55.7-4.6l-0.4-0.6l-5.1,5.1l0,0l-93.9,93.9
	c-16.9,16.9-16.9,44.4,0,61.3l9.8,9.8c-26.3,2.8-74.4,11.7-114.4,40C8.8,342.2-1,354.1,0.2,367.7c0.5,6.3,3.4,14.8,9.6,19.8
	c3.9,3.1,8.4,4.3,13,3.7c1.1,0.1,3.3,2.2,3.4,3.2l-0.9,6.2c-0.8,5.7,1.5,11.9,6.2,16.6c4.7,4.7,10.9,7,16.6,6.2l6-0.9
	c1.1,0.1,3.3,2.2,3.4,3.2l-0.9,6.2c-0.8,5.7,1.5,11.9,6.2,16.6c4.7,4.7,10.9,7,16.6,6.2l6-0.9c1.1,0.1,3.3,2.2,3.4,3.2l-0.9,6.2
	c-0.8,5.7,1.5,11.9,6.2,16.6c4.7,4.7,10.9,7,16.6,6.2l6.1-0.9c1.1,0.1,3.3,2.2,3.4,3.2l-0.2,1.1c-0.7,4.6,0.6,9.1,3.5,12.8
	c4.8,6.1,13.1,8.8,19.2,9.3c0.9,0.1,1.7,0.1,2.6,0.1c6.8,0,13.1-2.4,18.3-7.1c7.1-6.3,10.8-15.3,12.2-20.3
	c4.1-7.3,26.8-49.7,36.1-117.4l12.6,12.6c8.4,8.4,19.5,12.7,30.6,12.7c11.1,0,22.2-4.2,30.6-12.7l0.1-0.1l0,0l75.9-75.9l0,0
	l17.8-17.8c16.9-16.9,16.9-44.4,0-61.3l-8.6-8.6c26.3-2.8,74.4-11.7,114.4-40c17.5-6.3,27.3-18.2,26.1-31.9
	C511.2,137.9,508.4,129.4,502.1,124.4z M288.1,353.3l-111.3-150l40.3-40.3l10.8-10.8l111.3,150L288.1,353.3z M160.5,476.8l-1.1,1.9
	l0,1.3c-0.9,2.9-5.1,15.2-14.9,14.6c-3.6-0.3-6.7-2.1-7.1-2.5l0.2-1.1c0.8-5.7-1.5-11.9-6.2-16.6c-4.1-4.1-9.3-6.4-14.3-6.4
	c-0.8,0-1.5,0.1-2.3,0.2l-6.1,0.9c-1.1-0.1-3.3-2.2-3.4-3.2l0.9-6.2c0.8-5.7-1.5-11.9-6.2-16.6c-4.7-4.7-10.9-7-16.6-6.2l-6,0.9
	c-1.1-0.1-3.3-2.2-3.4-3.2l0.9-6.2c0.8-5.7-1.5-11.9-6.2-16.6s-10.9-7-16.6-6.2l-6.1,0.9c-1.1-0.1-3.3-2.2-3.4-3.2l0.9-6.2
	c0.8-5.7-1.5-11.9-6.2-16.6c-4.7-4.7-10.9-7-16.4-6.2c-1-0.5-3-3.8-3.3-7.9c-0.7-8.3,12.7-13.4,15.4-14.3l1.5-0.5l1-0.7
	c45.9-33,106.3-38,121.4-38.7l9.6,9.6c-1,0.5-1.9,1.2-2.6,2.1c-11,13.1-18.5,13.3-33.3,13.8c-5.3,0.2-11.3,0.4-18.2,1.3
	c-4.7,0.6-8.1,4.9-7.5,9.7c0.5,4.4,4.3,7.6,8.6,7.6c0.4,0,0.7,0,1.1-0.1c6.2-0.8,11.5-1,16.7-1.1c6.7-0.2,13-0.5,19.3-2.1
	c-15.1,20.1-22.9,47.4-19.6,73.7c0.5,4.4,4.3,7.6,8.6,7.6c0.4,0,0.7,0,1.1-0.1c4.7-0.6,8.1-4.9,7.5-9.7c-3.9-31.3,11.7-65.3,36.3-79
	c1.3-0.7,2.2-1.8,3-3l9.5,9.5C188.6,428.9,160.8,476.4,160.5,476.8z M273.8,367.6c-10.1,10.1-26.6,10.1-36.8,0l-22.4-22.4
	l-50.8-50.8l-20.7-20.7c-10.1-10.1-10.1-26.6,0-36.8l21.3-21.3l111.3,150L273.8,367.6z M367.6,273.8l-16,16l-111-149.6
	c4.4-3.1,9.6-4.7,14.8-4.7c6.7,0,13.3,2.5,18.4,7.6l23.6,23.6l0,0l12.1,12.1l58.2,58.2c4.9,4.9,7.6,11.4,7.6,18.4
	S372.5,268.9,367.6,273.8z M479.1,160.1l-2.5,1.2c-45.9,33-106.3,38-121.4,38.7l-9.4-9.4c1.1-0.5,2.2-1.3,3-2.3
	c11-13.1,18.5-13.3,33.3-13.8c5.3-0.2,11.3-0.4,18.2-1.3c4.7-0.6,8.1-4.9,7.5-9.7c-0.6-4.7-5-8.1-9.7-7.5c-6.2,0.8-11.5,1-16.7,1.1
	c-6.7,0.2-13,0.5-19.3,2.1c15.1-20.1,22.9-47.4,19.6-73.7c-0.6-4.8-5-8.1-9.7-7.5c-4.7,0.6-8.1,4.9-7.5,9.7
	c3.9,31.3-11.7,65.3-36.3,79c-1.4,0.8-2.4,2-3.2,3.3l-9.8-9.9c8-77.1,35.8-124.6,36.1-125.1l1.2-2l0-1.2c0.9-3,5.3-15.3,14.9-14.6
	c3.6,0.3,6.7,2.1,7.1,2.5l-0.2,1.1c-0.8,5.7,1.5,11.9,6.2,16.6c4.7,4.7,10.9,7,16.6,6.2l6.1-0.9c1.1,0.1,3.3,2.2,3.4,3.2l-0.9,6.2
	C405,58,407.3,64.3,412,69c4.7,4.7,10.9,7,16.6,6.2l6.1-0.9c1.1,0.1,3.3,2.2,3.4,3.2l-0.9,6.2c-0.8,5.7,1.5,11.9,6.2,16.6
	c4.7,4.7,10.9,7.1,16.6,6.2l6.1-0.9c1.1,0.1,3.3,2.2,3.4,3.2l-0.9,6.2c-0.8,5.7,1.5,11.9,6.2,16.6c4.7,4.7,10.9,7,16.4,6.2
	c1,0.5,3,3.8,3.3,7.9C495.2,154.1,481.8,159.1,479.1,160.1z"/>
      </svg>
    </div> <!-- end .option -->
    <div class="identifier">
        <p>3</p>
        <p>$0.65</p>
      </div>
    </div> <!-- end. square -->
  </div> <!-- end .window -->
    
  <div class="calculator">
    <div class="screen">
      <p>Insert Coins</p>
      <p>$0.00</p>
    </div>
    <div class="choices">
      <button class="selection" value="cola">1</button>
      <button class="selection" value="chips">2</button>
      <button class="selection" value="candy">3</button>
    </div>
    <div class="return_box">
      <button class="return_button">
      </button>
      <p>Return change</p>
    </div>
    <div class="coin_return">
      <p>Coin Return</p>
    </div>
  </div>
  <div class="collect">
  </div>
</div> <!-- end .calculator-->
  <div class="legs clearfix">
    <div class="leg-left">
    </div>
    <div class="leg-right">
    </div>
  </div> <!-- end .legs -->
</div> <!-- end .machine -->
    
  <div class="coin_selection">
    <div class="instructions">
      <h3>The Virtual Vending Machine</h3>
      <p>Instructions:</p>
      <p>1. Click buttons below to insert coins into the machine. Machine will make change by default.</p>
      <p>2. To select an item, click a numbered button corresponding to desired item.</p>
      <p>3. To request money back, click red "Return change" button.</p>
      <p>4. To remove change, click "Collect Change" area.</p>
      <p>5. To collect item, click area when instructed</p>
      <p>6. To tell the machine to accept exact change only, select "Exact change" button</p>
      <p>7. To allow machine to make change, click "Change ok" button</p>
    </div> <!-- end. instructions -->
    <div class="exact">
      <button class="exact_only">Exact change</button>
      <button class="change_ok">Change ok</button>
    </div> <!-- end .exact -->
    <button class="add_coin" id="penny" value="2.5">Insert penny</button>
    <button class="add_coin" id="nickel" value="5.0">Insert nickel</button>
    <button class="add_coin" id="dime" value="2.27">Insert dime</button>
    <button class="add_coin" id="quarter" value="5.8">Insert quarter</button>
  </div> <!-- end .coin_selection -->
</div> <!-- end .wrapper -->

<div class="attribution">Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from   <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</div>

script.js

//Amount of change currently in machine
var currentChange = 0;

var strCurrent;
var costItem;
var foodObj;
var exactChange = false;

//Screen text options
var screenDefault = "<p>Insert Coins</p><p>$0.00</p>";
var screenThanks = "<p>THANK YOU</p>";
var cannotAccept = "<p>Cannot accept coin.</p>";
var screenExact = "<p>Exact change only</p>";
var screenSoldOut = "<p>SOLD OUT</p>";

//Array of coin objects w/ properties- belongs to vending machine
var coins = [{
  name: "nickel",
  weight: 5.0,
  diameter: 0.84,
  value: 0.05
}, {
  name: "dime",
  weight: 2.27,
  diameter: 0.7,
  value: 0.1
}, {
  name: "quarter",
  weight: 5.8,
  diameter: 0.96,
  value: 0.25
}];

//Products for sale in vending machine w/ costs and inventory
var foods = [ {
  name: "cola",
  cost: "1.00",
  inventory: 10
},
{
  name: "chips",
  cost: "0.50",
  inventory: 10
},
{
  name: "candy",
  cost: "0.65",
  inventory: 10
}
];

//Screen message
function screenMessage(text) {
  $(".screen").html(text);
}

//Resets change amout in machine to 0
function resetChange() {
  return currentChange = 0;
}


//Subtracts item from inventory
function updateInventory() {
  return foodObj.inventory -= 1;
}
//Alerts user to get coins from coin return
function getCoins() {
   $(".coin_return").html('<p class="cc">Collect Change</p>');
}


//Function to activate collection of vending machine item
function collectItem() {
   //Send item to collect area
    $(".collect").html("<h3>Click here to collect item</h3>");
      //When collect area clicked
      $(".collect").click(function() {
        //Reset collect area
        $(".collect").html("");
        //Reset screen
        screenToDefault();
  });
}
                          
//Keep track of money inserted
  //When coin button clicked
  $(".add_coin").click(function() {
    //Convert button value aka weight into number
    var isCoin = [];
    var val = $(this).val();
    var number = parseFloat(val);
    //Reset screen
    screenMessage(screenDefault);
 
  
  //Search coins array for value
  for (var i =0; i < coins.length; i++) {
    for (var prop in coins[i]) {
    if (coins[i][prop] === number) {
      //Add coin obj value to isCoin array
      isCoin.push(number);
      //Assign object's value to inserted coin variable
      var insertedCoin = coins[i].value;
      //Add val of inserted coin to total amt inserted in machine
      currentChange += insertedCoin;
      //Convert total to string w/ 2 decimals
      strCurrent = currentChange.toFixed(2);
      var viewCurrentTotal = "<p>Insert Coins</p><p>$" + strCurrent + "</p>";
      //Append total to screen
      screenMessage(viewCurrentTotal);
      //add inserted coin to new isCoin array
      isCoin.push(insertedCoin);
      console.log(insertedCoin);
      console.log(currentChange);
      console.log(strCurrent);
    }  
   }
  }
  //If a number was not pushed to array aka coin doesn't exist for machine
  if (isCoin[0] === undefined) {
    console.log("coin not accepted");
    //Update screen
    screenMessage(cannotAccept);
    //Alert user to remove coin
    getCoins();
  }
  console.log(isCoin);
});
 



  //Select food item
  $(".selection").click(function() {
   //Assign button's value to valItem
   var valItem = $(this).val();
   console.log(valItem);
   
  for(var i =0; i < foods.length; i++) {
      //Checks to see if selection's value exists in foods array
      if (valItem === foods[i].name) {
        console.log("exact match!");
        //Assigns cost 
        costItem = foods[i].cost;
        //Assigns matching obj to variable
        foodObj = foods[i];
        console.log(costItem);
    }
  }
    

 //If cost of item is less than amount inserted in machine   
 if (strCurrent < costItem) {
    //If exact change required
     if (exactChange) {
      //Update screen: exact change
       screenMessage(screenExact);
     } else if (foodObj.inventory === 0) {
        //Update screen: SOLD OUT
        screenMessage(screenSoldOut);
  } else {
    var screenCostItem = '<p>PRICE</p><p>$' + costItem + '</p>';
    //Update screen: PRICE
   screenMessage(screenCostItem);
  }
 }

  //If item cost equals amount of change in machine
  if (strCurrent === costItem) {
    //If item out of stock
    if (foodObj.inventory === 0) {
      //Update screen: SOLD OUT
      screenMessage(screenSoldOut);
    } else {
      //Update screen: THANKS
      screenMessage(screenThanks);
      //Send item to collect area
      collectItem();
      //Update total change in machine
      resetChange();
      //Update inventory
      updateInventory();
      console.log(foodObj.inventory);
      }
    }
 
    //If item cost is less than amount of change in machine
     if (strCurrent > costItem) {
        //If exact change required
        if (exactChange) {
          //Update screen: Exact change
         screenMessage(screenExact);
          //If item sold out
        } else if (foodObj.inventory === 0) {
          //Update screen: SOLD OUT
          screenMessage(screenSoldOut);
          } else {
            //Update screen: THANKS
            screenMessage(screenThanks);
            //Send item to collect area
            collectItem();
           //Update total
           var returnChange = currentChange - costItem;
           strCurrent = returnChange.toFixed(2);
           console.log("current change:" + strCurrent);
          //Display change amount on screen
          $(".screen").append('<p class="change_message">Change: $' + strCurrent + '</p>');
          //Send change to coin return
          getCoins();
          //When change removed, update amt in machine
          resetChange();
          //Update inventory
          updateInventory();
          console.log(foodObj.inventory);
         }
      }
   });

//Require exact change
$(".exact_only").click(function() {
    exactChange = true;
});

//Change ok
$(".change_ok").click(function() {
  exactChange = false;
});

//Create coin return
$(".return_button").click(function() {
  if (currentChange > 0) {
    //Reset amount in machine
    resetChange();
    //Update screen: THANKS
    screenMessage(screenThanks);
    //Tell user amount of change returned
    $(".screen").append('<p class="change_message">Change: $' + strCurrent + '</p>');    
   //Send change to coin return
   getCoins();
   //Update screen: default
   screenMessage(screenDefault);
  }
});

//When coin return screen clicked
$(".coin_return").click(function() {
  //Message returns to "Coin Return"
  $(this).html("<p>Coin Return</p>")
  //Resets screen
  screenMessage(screenDefault);
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

/********************
General Styling
********************/

html {
  box-sizing: border-box;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

.machine {
  width: 320px;
  margin: 0 auto;
  margin-top: 2em;
}

.box {
  width: 80%;
  height: 450px;
  background: #cccccc;
  border-radius: 10px;
  margin: 0 auto;
  padding-top: 3em;
}

.legs {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.leg-left, .leg-right {
  background: #999999;
  height: 3em;
  width: 1em;
  display: inline-block;
}

.leg-right {
  float: right;
  margin-right: 1em;
}

.leg-left {
  float: left;
  margin-left: 1em;
}

.attribution {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 2em;
}

/********************
Food Contents Styling
********************/

.window {
  width: 50%;
  height: 350px;
  background: #999999;
  margin-left: 10%;
  display: inline-block;
  float: left;
}

.square {
  margin: 0 auto;
  margin-top: 9px;
  background: #cccccc;
  height: 105px;
  width: 90%;
}

.option {
  background: black;
  width: 60px;
  height: 80px;
  margin-top: 12.5px;
  float: left;
}

svg {
  width: 50px;
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

.identifier {
  background: black;
  width: 50px;
  height: 80px;
  margin-top: 12.5px;
  margin-left: 2px;
  float: left;
  border-radius: 40%;
}

.identifier p {
  color: white;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
}

/********************
Screen/Buttons Styling
********************/

.calculator {
  background: #999999;
  width: 25%;
  height: 350px;
  display: inline-block;
  margin-left: 4%;
  float: left;
  
}

.screen {
  background: black;
  width: 90%;
  height: 100px;
  margin: 5%;
}

.screen p {
  color: #FFF;
  text-align: center;
  padding-top: 15px;
}

.change_message {
  padding-top: 0;
  margin-top: -15px;
  font-size: 14px;
}

.selection {
  display: block;
  margin: 0 auto;
  margin-top: 5px;
  padding: 3px;
  border-radius: 50%;
}

.coin_return {
  background: black;
  width: 80%;
  height: 60px;
  border-radius: 5px;
  margin: 0 auto;
  color: #FFF;
}

.coin_return p {
  text-align: center;
  padding-top: 10px;
  font-size: 14px;
}

.currentNum {
  color: white;
}

.return_button {
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  background: red;
  padding: 7px;
}

.return_box p {
  font-size: 10px;
  text-align: center;
  margin-top: 0px;
}


/********************
Item Collection Styling
********************/
.collect {
  background: #999999;
  width: 80%;
  height: 50px;
  display: inline-block;
  margin: 0 auto;
  margin-top: 1em;
  margin-left: 10%;
  text-align: center;
  border-radius: 5px;
}

.collect h1 {
  display: inline-block;
  font-size: 20px
}

.cc {
  color: red;
}

.collect h3 {
  color: red;
  font-size: 14px;
}

/********************
Instructions/Coin Button Styling
********************/
.coin_selection {
  display: block;
  width: 80%;
  padding: 0 1em;
  margin: 0 auto;
  margin-top: 4em;
  margin-bottom: 4em;
}

.instructions {
  margin-bottom: 1em;
}

.exact_only, .change_ok {
  display: inline-block;
  margin: 0 auto;
  padding: 5px 10px;
  border-radius: 10px;
  margin-top: 7px;
}

.add_coin {
  margin: 0 auto;
  margin-top: 0.5em;
  padding: 5px 10px;
  border-radius: 10px;
  display: inline-block;
  
}

/***********************
Media Queries
***********************/
@media(min-width: 769px) {
  
  .wrapper {
    width: 700px;
    margin: 0 auto;
  }
  
  .machine {
    float: left;
  }
  
  .coin_selection {
    margin-top: 1em;
    width: 330px;
    float: left;
  }
  
  
}

Vending Machine.markdown

Vending Machine

A Pen by Elaine on CodePen.

License.