diff --git a/boxes.js b/boxes.js index 6b2b3db..2cd1863 100644 --- a/boxes.js +++ b/boxes.js @@ -1 +1,64 @@ -console.log("hello world"); +'use strict'; + +// Exercise 1 +$(function () { + + alert('DOM ready!'); + + //2.1 + var $secret = $('#secretBox'); + $secret.css('background-color', 'white'); + $secret.append('

secret box!

'); + + //2.2 + $('#row1 div').toggleClass('boxType3'); + + //2.3 + $('#row4 div:last-child').css('display', 'none'); + + //2.4 + $('.boxType1').css('background-color', 'white'); + + //2.5 + $('#row2 div:nth-child(-n+2)').removeClass(); + + //2.6 + $('#container div:not(.row)').not('#secretBox').css('width', '52px'); + + //3.1 && 3.4 + $('#container').on('click', function(event) { + + //console.log(event.target === this); + console.log(event.pageX, event.pageY); + + if (event.target === this) { + + $(this).css('background-color', 'LimeGreen'); + } else { + + $(this).css('background-color', 'black'); + $(event.target).css('background-color', 'white'); + } + }); + + //3.2 + $('.boxType1').append('Click Me'); + + $('a').on('click', function(event) { + + alert('You can never leave!'); + event.preventDefault(); + }); + + //3.3 + $('.box').on('click', function() { + + if ($(this).hasClass('kitten')) { + $(this).empty(); + } else { + $(this).append(''); + } + + $(this).toggleClass('kitten'); + }); +});