diff --git a/boxes.js b/boxes.js index 6b2b3db..0b7cc09 100644 --- a/boxes.js +++ b/boxes.js @@ -1 +1,112 @@ +'use strict'; console.log("hello world"); + +//### Exercise 1 - DOM Ready First part that I tried is commented out +//then second part is shorthand alert. +// $( document ).ready(function() { +// alert('ready for DOM manipulation'); +// }); + +$(function() { + alert('ready for DOM manipulation'); + + + // ### Exercise 2 - Selectors, CSS, Attributes + // + // Go to the [MDN docs for selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors). Read through the docs to get an idea of how selectors work. Next, look at the [jQuery page on selectors](https://learn.jquery.com/using-jquery-core/selecting-elements/). + // + // 1. Find the secretBox on the page. Set the background color to white. Add an h1 tag that says, "secret box!" + + // console.log($('#secretBox')); + // + // $('#secretBox').css('background-color', 'white'); + // + // + // var $h1 = $('
');
+ $('img').css('height','100%');
+
+ }
+ $(this).toggleClass('pupppy');
+ });
+
+
+
+ // 4. Write a click handler __on the container div__.
+ //The click handler should turn the container background to black and the background
+ //of the original div that was clicked to white. If the user original div that was clicked happened to be the container div,
+ //change the background of the container div to lime green. You __should not__ use any selectors for this exercise. You can do it completely with what is given to you in the event callback.
+
+ $('#container').click(function(event) {
+ $(this).css('background-color', 'black');
+ $(event.target).css('background-color', 'white');
+ // console.log($(this));
+ // console.log($(this).is(event.target));
+ if ($(this).is(event.target) === true) {
+ $(this).css('background-color', 'lime');
+
+
+ }
+ });
+
+ });