diff --git a/README.md b/README.md index 002b475..990e7b7 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A grid of colorful boxes that can be used as a jQuery playground for learning se ### Exercise 1 - DOM Ready -Reference [this page](https://learn.jquery.com/using-jquery-core/document-ready/). Add a callback function to ready that alerts a message saying, ready for DOM manipulation. Try using both styles of callbacks. +Reference [this page](https://learn.jquery.com/using-jquery-core/document-ready/). Add a callback function to ready that alerts a message saying, ready for DOM manipulation. Try using both styles of callbacks. ### Exercise 2 - Selectors, CSS, Attributes @@ -12,7 +12,7 @@ Go to the [MDN docs for selectors](https://developer.mozilla.org/en-US/docs/Web/ 1. Find the secretBox on the page. Set the background color to white. Add an h1 tag that says, "secret box!" 2. Find all child divs of the first row. Set the class for each div to boxType3. -3. Make the last box in the last row disappear. (Hint, look into the dispaly style. Also, you should only get back one element from your selector.). +3. Make the last box in the last row disappear. (Hint, look into the display style. Also, you should only get back one element from your selector.). 4. Change all red boxes to white. 5. Get the first two divs in the second row. Take away all styling from the divs. 6. Get all divs inside the container that are not row divs and are not the secret box div. Set the width of the divs to 2 pixels. diff --git a/boxes.js b/boxes.js index 6b2b3db..6ebaf47 100644 --- a/boxes.js +++ b/boxes.js @@ -1 +1,14 @@ -console.log("hello world"); + +$(document).ready(function() { + console.log("hello ready"); + + $('#secretBox').css("background-color", "white"); + $('#secretBox').html("

secrect box

"); + $('#row1').children().addClass("boxType3"); + $('#row4 div:last-child').css("display", "none"); + $('.boxType1').css("background", "white"); + $('#row2').children().slice(0, 2).remove(); + //$('#row2').eq().removeClass(); + //$("div").not(".row #secretBox").css("width", "2px"); + +})