Intermediate JavaScript: Homework Week 2

Welcome! This is the homework to accompany Girl Develop It LA's JavaScript 201: Intermediate JavaScript class. You can always reference the slides if you get stuck. Commit to spending at least 20 minutes trying to figure out a problem before you peek at the answer. It helps you learn!

Froyo Machine

Your task is to create a froyo machine! Go through these steps:

1. Download and unzip froyostarter.zip. Open in your favorite text editor and in the browser.
2. In index.html, we have given you a power button, and three flavor buttons on the machine. When the user presses the power button, the click event will fire for that element. We have started writing a callback function for you. Find the togglePower() callback function.
3. Inside the togglePower() callback, bind an event listener to each flavor button on the machine that listens for the click event.
4. Next, set isOn to true inside of the same callback function.
5. Each button on the machine should do something. Use the included froyo images: img/chocolate.jpg, img/strawberry.jpg, and img/vanilla.jpg to create an <img> tag, add an src attribute, and append it to the dispenser inside the machine.
6. In the browser, check that you can turn the machine on, and that your images get appended to the dispenser as expected.
7. Now, we also want to be able to turn the machine off. Add logic so that events are bound to the flavor buttons when the machine turns on and are unbound when the machine turns off. We don't want the flavor button to do anything if the machine is off. Also make sure that the isOn variable is changing to accurately reflect the state of the machine.

/* The froyo machine is off until it's turned on. */
var isOn = false;

/* Select the power button */
var powerButton = document.querySelector('#power img');

/* Select the flavor buttons */
var vanillaButton = document.getElementById('vanilla');
var strawberryButton = document.getElementById('strawberry');
var chocolateButton = document.getElementById('chocolate');

/* Select the dispenser */
var dispenser = document.getElementById('dispenser');

/* A callback function to turn the froyo machine on and off */
var togglePower = function(e) {
	if (!isOn) {
		isOn = true;
		this.src = 'img/power_on.png';
		vanillaButton.addEventListener('click', vanillaMaker);
		strawberryButton.addEventListener('click', strawberryMaker);
		chocolateButton.addEventListener('click', chocolateMaker);
	} else {
		isOn = false;
		this.src = 'img/power.png';
		vanillaButton.removeEventListener('click', vanillaMaker);
		strawberryButton.removeEventListener('click', strawberryMaker);
		chocolateButton.removeEventListener('click', chocolateMaker);
	}
}

/* A callback function to make vanilla froyo */
var vanillaMaker = function(e) {
	var img = document.createElement('img');
	img.src = 'img/vanilla.jpg';
	dispenser.innerHTML = '';
	dispenser.appendChild(img);
};

/* A callback function to make strawberry froyo */
var strawberryMaker = function(e) {
	var img = document.createElement('img');
	img.src = 'img/strawberry.jpg';
	dispenser.innerHTML = '';
	dispenser.appendChild(img);
};

/* A callback function to make chocolate froyo */
var chocolateMaker = function(e) {
	var img = document.createElement('img');
	img.src = 'img/chocolate.jpg';
	dispenser.innerHTML = '';
	dispenser.appendChild(img);
};

/* Add an event listener to the power button to bind the togglePower callback function to the click event */
powerButton.addEventListener('click', togglePower);

Bonuses

Do all or as many as you can.

• Clean up your code so that one function can create any flavor of froyo, depending on the button being pressed.
  Show/Hide Solution

  /* The froyo machine is off until it's turned on. */
  var isOn = false;
  
  /* Select the power button */
  var powerButton = document.querySelector('#power img');
  
  /* Select the flavor buttons */
  var vanillaButton = document.getElementById('vanilla');
  var strawberryButton = document.getElementById('strawberry');
  var chocolateButton = document.getElementById('chocolate');
  
  /* Select the dispenser */
  var dispenser = document.getElementById('dispenser');
  
  /* A callback function to turn the froyo machine on and off */
  var togglePower = function(e) {
  	if (!isOn) {
  		isOn = true;
  		this.src = 'img/power_on.png';
  		vanillaButton.addEventListener('click', froyoMaker);
  		strawberryButton.addEventListener('click', froyoMaker);
  		chocolateButton.addEventListener('click', froyoMaker);
  	} else {
  		isOn = false;
  		this.src = 'img/power.png';
  		vanillaButton.removeEventListener('click', froyoMaker);
  		strawberryButton.removeEventListener('click', froyoMaker);
  		chocolateButton.removeEventListener('click', froyoMaker);
  	}
  }
  
  /* A callback function to make any flavor froyo */
  var froyoMaker = function(e) {
  	var flavor = this.id;
  	var img = document.createElement('img');
  	img.src = 'img/' + flavor + '.jpg';
  	dispenser.innerHTML = '';
  	dispenser.appendChild(img);
  };
  
  /* Add an event listener to the power button to bind the togglePower callback function to the click event */
  powerButton.addEventListener('click', togglePower);

• Clean up your code to use event delegation for dispensing the flavors of froyo.
  Show/Hide Solution

  /* The froyo machine is off until it's turned on. */
  var isOn = false;
  
  /* Select the power button */
  var powerButton = document.querySelector('#power img');
  
  /* Select the machine */
  var machine = document.getElementById('machine');
  
  /* Select the dispenser */
  var dispenser = document.getElementById('dispenser');
  
  /* A callback function to turn the froyo machine on and off */
  var togglePower = function(e) {
  	if (!isOn) {
  		isOn = true;
  		this.src = 'img/power_on.png';
  		machine.addEventListener('click', froyoMaker);
  	} else {
  		isOn = false;
  		this.src = 'img/power.png';
  		machine.removeEventListener('click', froyoMaker);
  	}
  }
  
  /* A callback function to make any flavor froyo */
  var froyoMaker = function(e) {
  	var el = e.target;
  	while (el != this) {
  		if (el && el.nodeName == 'BUTTON') {
  			var flavor = el.id;
  			var img = document.createElement('img');
  			img.src = 'img/' + flavor + '.jpg';
  			dispenser.innerHTML = '';
  			dispenser.appendChild(img);
  		};
  		el = el.parentNode;
  	}
  };
  
  /* Add an event listener to the power button to bind the togglePower callback function to the click event */
  powerButton.addEventListener('click', togglePower);

• Make the froyo machine an object and make isOn a property of that object. Make toggling the power and dispensing the different flavors of yogurt methods of that object.
  Show/Hide Solution

  var froyoMachine = {
  	isOn: false,
  	powerButton: document.querySelector('#power img'),
  	container: document.getElementById('machine'),
  	dispenser: document.getElementById('dispenser'),
  	init: function(){
  		this.powerButton.addEventListener('click', froyoMachine.togglePower.bind(froyoMachine));
  	},
  	togglePower: function(e) {
  		if (!this.isOn) {
  			this.isOn = true;
  			this.powerButton.src = 'img/power_on.png';
  			this.container.addEventListener('click', this.makeFroyo);
  		} else {
  			this.isOn = false;
  			this.powerButton.src = 'img/power.png';
  			this.container.removeEventListener('click', this.makeFroyo);
  			var froyo = froyoMachine.dispenser.getElementsByTagName('img')[0];
  			froyoMachine.dispenser.removeChild(froyo);
  		}
  	},
  	makeFroyo: function(e) {
  		var el = e.target;
  		while (el != this) {
  			if (el && el.nodeName == 'BUTTON') {
  				var flavor = el.id;
  				var img = document.createElement('img');
  				img.src = 'img/' + flavor + '.jpg';
  				froyoMachine.dispenser.innerHTML = '';
  				froyoMachine.dispenser.appendChild(img);
  			}
  			el = el.parentNode;
  		}
  	}
  };
  
  froyoMachine.init();

Hints

• Make sure that you use your browser developer tools.
• Check for errors using console.log() to figure out how far your code makes it and what the values of your variables are along the way.

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.