Yonet/Froyo.html

## 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>