diff --git a/boxes.html b/boxes.html index 44586a8..76ea085 100644 --- a/boxes.html +++ b/boxes.html @@ -5,6 +5,7 @@ Boxes! +
@@ -15,10 +16,10 @@
-
-
-
-
+
1
+
2
+
3
+
4
@@ -33,6 +34,12 @@
+ diff --git a/boxes.js b/boxes.js index 6b2b3db..4af236a 100644 --- a/boxes.js +++ b/boxes.js @@ -1 +1,52 @@ -console.log("hello world"); +$(function() { + console.log("ready!"); + $('#secretBox').on('mouseover', function() { + $(this).css({ + 'background-color': 'white', + 'border-bottom': '4px solid orange' + }) + }).append('

Secret box!

'); + $('#row1 > div').on('mouseover', function() { + $(this).addClass('boxType3') + }); + $('#row1 > div:last-child').on('mouseover', function() { + $(this).css({ + 'display': 'none' + }) + }); + $('.boxType1').css({ + 'background-color': 'white', + 'border-bottom': '1px solid black' + }).append("Click Me") + $('#row2 > div:first-child, #row2 > div:first-child+div').css({ + 'all': 'initial' + }); + // $(" #container > div:not(.row), #container > div:not(#secretBox)").css({'width': '2px'}); + $('#container').on('click', function(e) { + console.log(e.pageX + ' , ' + e.pageY); + }); + $('.boxType1').on('click', function(e) { + alert("You can never leave the page"); + e.preventDefault(); + }); + $('.box').on('click', function() { + $(this).toggleClass('puppy') + }); + $('#container').on('click', function(e) { + if (e.target.id === 'container') { + $(this).css({ + 'background-color': 'lime' + }) + } else { + $(this).css({ + 'background-color': 'black' + }) + $(e.target).css({ + 'background-color': 'white' + }) + } + }) +}); + + +// console.log("hello world"); \ No newline at end of file diff --git a/style.css b/style.css index bfbe511..fe462dc 100644 --- a/style.css +++ b/style.css @@ -41,3 +41,7 @@ .boxType3 { background: blue; } + +.puppy { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRJTJk1vRYIzRaAzigs2A-338F-fi308r2ySl4DqXyzmU56lBSiFPJ9CSw) +}