Yonet · July 24, 2015 19:49
diff --git a/Froyo.html b/Froyo.html
 <html>
 	<head>
 		<title>Froyo Machine!</title>
 		<style>
 			#machine {
 				float:left;
 				width:40%;
 				border:3px outset gray;
 			}
 			div#power > img {
 				float:left;
 			}
 			.btn {
 				float:left;
 				clear:right;
 			}
 		</style>
 	</head>
 	<body>
 		<h1>Froyo-maker 2000e</h1>
 		<div id="machine">
 			<div id="power">
 				<img src="img/power.png" class="power">
 			</div>
 			<button id="vanilla" class="btn">Vanilla</button><br>
 			<button id="chocolate" class="btn">Chocolate</button><br>
 			<button id="swirl" class="btn">Swirl</button><br>
 		</div>
 		<div id="conveyor_belt" style="float:left">
 			<img src="img/conveyor.png">
 		</div>
 		<script>
 			var powerButton = document.getElementById('power'),
 				isOn = true;
 			var conveyor = document.getElementById('conveyor_belt');
 			powerButton.addEventListener('click', function(event){
 				event.target.parentElement.innerHTML = '<img src="img/power_on.png">'
 				// Bind your events here - find the buttons and then add events to them, using functions you create below
 				
 				//Selecting the buttons to bind the evets to...
 				var vanillaButton = document.getElementById('vanilla');
 				var chocButton = document.getElementById('chocolate');
 				var swirlButton = document.getElementById('swirl');

 				//Binding vanillaMaker function for the first round of solution. You can create similar functions for choclate and swirl.
 				vanilla.addEventListener('click', vanillaMaker);

 				// Set isOn to true
 				
 				// create several more functions for each flavor! Using the refactored flavorMaker function.
 				chocButton.addEventListener('click', flavorMaker);
 				swirlButton.addEventListener('click', flavorMaker);
 				
 				// Make sure your machine can be turned off by unbinding event listeners when you turn it off! (make sure to replace the image as well- power.png is the "off" position.)
 				
 				//To remove the event listener
 				chocButton.removeEventListener('click', flavorMaker);
 			});
 			
 			var vanilla = document.getElementById('vanilla');
 			
 			function vanillaMaker(){
 				// create an img tag
 				var vanillaImg = document.createElement('img');

 				// set it's src attribute to be img/vanilla.jpg
 				vanillaImg.src = "img/vanilla.jpg";

 				// append it to the conveyor belt
 				conveyor.appendChild(vanillaImg);
 				
 			}

 			// BONUS: Clean up your code so that one function can create any flavor, depending on the button being pressed 
 		 
 			// HINT: You can look at the ID of the button with event.target, which has the flavor of the button.
 			function flavorMaker(event){

 				// create an img tag
 				var imgNode = document.createElement('img');

 				// set the source of the node to the current button's image url.
 				imgNode.src = "img/" + event.target.id + ".jpg";
 				
 				// append it to the conveyor belt
 				conveyor.appendChild(imgNode);
 				
 			}
 		</script>
 	</body>
 </html>
	<html>
	<head>
	<title>Froyo Machine!</title>
	<style>
	#machine {
	float:left;
	width:40%;
	border:3px outset gray;
	}
	div#power > img {
	float:left;
	}
	.btn {
	float:left;
	clear:right;
	}
	</style>
	</head>
	<body>
	<h1>Froyo-maker 2000e</h1>
	<div id="machine">
	<div id="power">
	<img src="img/power.png" class="power">
	</div>
	<button id="vanilla" class="btn">Vanilla</button><br>
	<button id="chocolate" class="btn">Chocolate</button><br>
	<button id="swirl" class="btn">Swirl</button><br>
	</div>
	<div id="conveyor_belt" style="float:left">
	<img src="img/conveyor.png">
	</div>
	<script>
	var powerButton = document.getElementById('power'),
	isOn = true;
	var conveyor = document.getElementById('conveyor_belt');
	powerButton.addEventListener('click', function(event){
	event.target.parentElement.innerHTML = '<img src="img/power_on.png">'
	// Bind your events here - find the buttons and then add events to them, using functions you create below

	//Selecting the buttons to bind the evets to...
	var vanillaButton = document.getElementById('vanilla');
	var chocButton = document.getElementById('chocolate');
	var swirlButton = document.getElementById('swirl');

	//Binding vanillaMaker function for the first round of solution. You can create similar functions for choclate and swirl.
	vanilla.addEventListener('click', vanillaMaker);

	// Set isOn to true

	// create several more functions for each flavor! Using the refactored flavorMaker function.
	chocButton.addEventListener('click', flavorMaker);
	swirlButton.addEventListener('click', flavorMaker);

	// Make sure your machine can be turned off by unbinding event listeners when you turn it off! (make sure to replace the image as well- power.png is the "off" position.)

	//To remove the event listener
	chocButton.removeEventListener('click', flavorMaker);
	});

	var vanilla = document.getElementById('vanilla');

	function vanillaMaker(){
	// create an img tag
	var vanillaImg = document.createElement('img');

	// set it's src attribute to be img/vanilla.jpg
	vanillaImg.src = "img/vanilla.jpg";

	// append it to the conveyor belt
	conveyor.appendChild(vanillaImg);

	}

	// BONUS: Clean up your code so that one function can create any flavor, depending on the button being pressed

	// HINT: You can look at the ID of the button with event.target, which has the flavor of the button.
	function flavorMaker(event){

	// create an img tag
	var imgNode = document.createElement('img');

	// set the source of the node to the current button's image url.
	imgNode.src = "img/" + event.target.id + ".jpg";

	// append it to the conveyor belt
	conveyor.appendChild(imgNode);

	}
	</script>
	</body>
	</html>