Create: A script to access and display object data
This page contains a display for nutrition facts for cereals. Unfortunately, right now it displays nothing at all, and its buttons don't work. This script, on the other hand, contains the definition for an array (named "cerealData") of objects containing the nutrition information for a variety of cereals. Your goal is to write a script to take information from the objects in the "cerealData" variable (which is, itself, an array) and display it for the user.
Things you'll need:
Some sort of overall "counter" variable to keep track of which entry in the cerealData array you're currently looking at. This will be a simple integer, starting at 0.
A function to update the viewer's HTML elements with the data from the cereal objects. Notice that the HTML ids are all the same as the property names of the cereal objects. Think carefully about what this function needs to do: (A) access the information in each property of the "current" cereal object, and (B) transfer that information into the elements on the page (think innerHTML).
Both a prev() and next() function, which should both: update the counter variable AND call the viewer update function. (Also consider how to prevent the user from going out of bounds-- an if-statement before updating the counter variable should help.)