info343/minilabs/5/solution/minilab5.js

// minilab5.js
// Sample JavaScript solution for Mini-Lab 5: jQuery
// INFO 343, Autumn 2012
// Morgan Doocy

$(document).ready(function() {
   
   // Here's what we did in Exercise 2, part 3...
   $('div.benefits p.note').css('background-color', 'fuchsia');
   
   // ...and this is what we did in Exercise 2, part 6.
   $('abbr').attr('title', 'Application Programming Interface');
   
   // This handles clicks on the button we added in Exercise 3.
   $('#dontclickme').click(ohNoYouDidnt);
});

// Changes various styles on the page, including increasing the font size of the
// #dontclickme button
function ohNoYouDidnt() {
   // (hehe)
   $('#dontclickme').css('font-size', '500%');
   $('#dontclickme').css('text-decoration', 'blink'); // (only works in Firefox)
   $('#dontclickme').text('OH NO YOU DIDN’T');
   // Note: You can also use the 'this' keyword in place of '#dontclickme' since
   // the ohNoYouDidnt function is attached to that button as an event handler.
   // Ex: $(this).css( ... );
   
   // "make this select and change one more style on the page"
   // You only needed to make one CSS change; here are numerous examples:
   $('.important:not(.note)').css('background-color', 'yellow');
   $('strong').css({
      'font-weight': 'normal',
      'font-size': '200%',
      'color': 'blue',
      'background-color': 'fuchsia'
   });
   $('li:nth-child(even)').css('background-color', 'lightgray'); // zebra striping!
   $(document.body).css('background-color', '#ffeeee');
   $('h1, h2, h3').css('color', 'blue');
   $('p:not(.note)').css({
      'margin': '2em 0', // shortcut syntax: 2em top/bottom, 0em left/right
      'text-align': 'right'
   })
}