JS201 JS and the DOM (Review): Final Exercise

Make a Froyo machine

Your task is to create a Froyo machine! Go through these steps, and do as many as you can in the time we have:

1. Download and unzip exercises.zip. Open in your favorite text editor.
2. In index.html, we have given you a power button and 3 flavor buttons on the machine. When a user presses the power button, the 'click' event will fire for that element. We have started writing an event listener for you. Find the anonymous function callback for the event listener.
3. Inside of the callback, bind a click event to each flavor button on the machine.
4. Next, set isOn to true inside of the same callback.
5. Each button on the machine should do something. Use the included Froyo images img/chocolate.jpg, img/vanilla.jpg, and img/swirl.jpg to create an <img> tag, add a src attribute, and append it to the conveyor belt <div> on the side of the machine.
6. Open index.html in your browser and make sure you can turn the button on. Make sure that your images get appended to the conveyor belt.
7. Now, we also want the machine to turn off. Add logic so that events are bound when the machine turns on and unbound when the machine turns off. Also make sure that isOn is changing to accurately reflect the state of the machine.
8. BONUS: Clean up your code so that one function can create any flavor, depending on the button being pressed.

Make sure that you use your browser developer tools to make debugging easier while working on this. 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.