Week 5 - Javascript, Jquery and 99 Bottles!

Click on the images to make them larger.

I posted most of the recap in the code here - PAL Github Recap - Week 5.

A quick run-through for further detail: 

First we build the HTML we would need for the exercise, which included a div with the id="body_container". Learning selectors is import, because we refer to them with both CSS and the programmatic side, Javascript/Jquery and whatever other JS frameworks you wish to sue.


We started building our javascript by using body onload="loadBottles" but then we quickly changed it to use the Jquery document.ready function instead. 

Our app basically loads the bottle container div with icons from the font-awesome library. We started using for loops, if statements, and other program flow logic that will begin to build the foundation for building full scale applications using Javascript and associated frameworks.


(click to enlarge)

Next we started messing with Jquery selectors, first loading the i tag array of icons into the bottle container than using method chaining to add the .red class, then we wrapped up with a small exercise to append 101 divs then add the red class to them if it's an even-numbered id.