From edc7a2ff5680352a75eabcd3ee0305fdfc2c33db Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 15:18:39 -0600 Subject: [PATCH 1/9] init commit --- boxes.html | 5 ++--- boxes.js | 19 ++++++++++++++++++- style.css | 4 ++-- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/boxes.html b/boxes.html index 44586a8..e1f214b 100644 --- a/boxes.html +++ b/boxes.html @@ -1,8 +1,6 @@ - - Boxes! @@ -34,5 +32,6 @@ - + + diff --git a/boxes.js b/boxes.js index 6b2b3db..df91497 100644 --- a/boxes.js +++ b/boxes.js @@ -1 +1,18 @@ -console.log("hello world"); +'use strict'; +//variable declaration +// var $secretBox; +// $secretBox = ('#secretBox'); + + +//alert when loaded +$(document).ready(alertReady); + console.log('document is ready'); + function alertReady(){ + alert('ready for DOM manipulation'); +} + +$('#secretBox').ready(function(){ + console.log('entering secretBox'); + $('#secretBox').css('background-color', 'white'); + $('#secretBox').append('

Secret Box!

'); +}); diff --git a/style.css b/style.css index bfbe511..cbb3202 100644 --- a/style.css +++ b/style.css @@ -16,8 +16,8 @@ margin-right:auto; margin-bottom:10px; width: 93%; -// border: 2px solid; -// border-color: black; + /*border: 2px solid; + border-color: black;*/ } .box { From 5edeee42c35e4142750b67ec165f77a37c58c6cc Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 15:49:24 -0600 Subject: [PATCH 2/9] up to changing classes --- boxes.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/boxes.js b/boxes.js index df91497..8fbc55a 100644 --- a/boxes.js +++ b/boxes.js @@ -1,7 +1,5 @@ 'use strict'; -//variable declaration -// var $secretBox; -// $secretBox = ('#secretBox'); + //alert when loaded @@ -11,8 +9,20 @@ $(document).ready(alertReady); alert('ready for DOM manipulation'); } -$('#secretBox').ready(function(){ +//change css and add h1 to secretBox +$(document).ready(function(){ console.log('entering secretBox'); $('#secretBox').css('background-color', 'white'); $('#secretBox').append('

Secret Box!

'); + +//Find all child divs of the first row. Set the class for each div to boxType3. + console.log('finding all child divs of first row'); + var row1 = $('#row1').children(); + console.log(row1); + $(row1).toggleClass('boxType3'); }); + +// $('#row4 boxType1').on('mouseover', function(){ +// console.log('deleting last div of last column'); +// $('div').remove(); +// }); From b15d3ad10abbf16230551de8517bf87c7920d298 Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 16:05:54 -0600 Subject: [PATCH 3/9] fixed a bug in my previous solution --- boxes.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/boxes.js b/boxes.js index 8fbc55a..a8d35ee 100644 --- a/boxes.js +++ b/boxes.js @@ -9,8 +9,8 @@ $(document).ready(alertReady); alert('ready for DOM manipulation'); } -//change css and add h1 to secretBox $(document).ready(function(){ +//change css and add h1 to secretBox console.log('entering secretBox'); $('#secretBox').css('background-color', 'white'); $('#secretBox').append('

Secret Box!

'); @@ -19,10 +19,13 @@ $(document).ready(function(){ console.log('finding all child divs of first row'); var row1 = $('#row1').children(); console.log(row1); - $(row1).toggleClass('boxType3'); -}); + $(row1).removeClass(); + $(row1).addClass('box boxType3'); + console.log('changed all divs in first column to have class of "boxType3" '); -// $('#row4 boxType1').on('mouseover', function(){ -// console.log('deleting last div of last column'); -// $('div').remove(); -// }); +//Make the last box in the last row disappear. + var row4Last = $('#row4').children().last(); + console.log('row4LastChild', row4Last); + console.log('found last child of row4'); + $(row4Last).removeClass(); +}); From a605ce18550c969103d400633fe731c5ae4cab51 Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 16:31:14 -0600 Subject: [PATCH 4/9] squashed non-special .box divs --- boxes.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/boxes.js b/boxes.js index a8d35ee..a833b88 100644 --- a/boxes.js +++ b/boxes.js @@ -20,12 +20,27 @@ $(document).ready(function(){ var row1 = $('#row1').children(); console.log(row1); $(row1).removeClass(); + console.log('removed original class of boxtype'); $(row1).addClass('box boxType3'); - console.log('changed all divs in first column to have class of "boxType3" '); + console.log('set all divs in first column to have class of "boxType3" '); //Make the last box in the last row disappear. var row4Last = $('#row4').children().last(); console.log('row4LastChild', row4Last); console.log('found last child of row4'); $(row4Last).removeClass(); + +//Get the first two divs in the second row. Take away all styling from the divs + $('#row2').each (function(){ + var row2FirstTwo = $(this).children().slice(0,2).show(); + console.log('first two children of row 2', row2FirstTwo); + $(row2FirstTwo).removeClass(); + }); + +//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. + $('div').each(function(){ + var divs = $('.box').not('#secretBox'); + divs.css('width', '2px'); + }); + }); From 2f5e5393217f2d3710a44527ce9316f2f1273da9 Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 17:08:38 -0600 Subject: [PATCH 5/9] working x/y axis reader --- boxes.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/boxes.js b/boxes.js index a833b88..1a1854f 100644 --- a/boxes.js +++ b/boxes.js @@ -38,9 +38,16 @@ $(document).ready(function(){ }); //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. - $('div').each(function(){ - var divs = $('.box').not('#secretBox'); - divs.css('width', '2px'); + // $('div').each(function(){ + // var divs = $('.box').not('#secretBox'); + // divs.css('width', '2px'); + // }); + +//Add an on click handler to the container div. Console log the x and y position of the click. + $('#container').on('click', function(e){ + var offset = $(this).offset(); + console.log('x-axis', e.pageX - offset.left); + console.log('y-axis', e.pageY - offset.top); }); }); From f2807c5a96b2ce0d84f587346eb82990203b833b Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 17:42:58 -0600 Subject: [PATCH 6/9] able to prevent default --- boxes.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/boxes.js b/boxes.js index 1a1854f..ee14a05 100644 --- a/boxes.js +++ b/boxes.js @@ -50,4 +50,12 @@ $(document).ready(function(){ console.log('y-axis', e.pageY - offset.top); }); +//Add links inside all red box divs that take the user to galvanize. Make sure the user won't leave the page after the alert! + $('.boxType1').append('werds'); +//Then add an on click handler that alerts the user that you can never leave the page. + var a = $('a'); + $(a).on('click', function(e){ + console.log('entering prevent default'); + e.preventDefault(); + }); }); From 79e8d0759be158706dc43d8455a37ca5e712f074 Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 18:21:44 -0600 Subject: [PATCH 7/9] working image toggle --- boxes.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/boxes.js b/boxes.js index ee14a05..cc0787a 100644 --- a/boxes.js +++ b/boxes.js @@ -50,12 +50,28 @@ $(document).ready(function(){ console.log('y-axis', e.pageY - offset.top); }); -//Add links inside all red box divs that take the user to galvanize. Make sure the user won't leave the page after the alert! +//Add links inside all red box divs that take the user to galvanize. $('.boxType1').append('werds'); //Then add an on click handler that alerts the user that you can never leave the page. var a = $('a'); $(a).on('click', function(e){ console.log('entering prevent default'); e.preventDefault(); + //Make sure the user won't leave the page after the alert! + confirm("You'll never get out of this maze"); }); +//For all box divs, add a click handler that adds an image of a cute puppy to the box. If the image is clicked again, remove the cute puppy. + + $('.box').on('click', function(){ + console.log('entering background change'); + var box = $(this); + if(!(box.hasClass('url'))){ + box.addClass('url'); + box.css('background-image', 'url(https://upload.wikimedia.org/wikipedia/commons/0/03/Lorem.gif)'); + } else { + box.css('background-image', 'none'); + box.removeClass('url'); + } + }); + }); From 55559c7116090958b5108f64de4101ee8828ea9a Mon Sep 17 00:00:00 2001 From: Roy Date: Mon, 6 Jun 2016 18:46:22 -0600 Subject: [PATCH 8/9] working on last exercise --- boxes.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/boxes.js b/boxes.js index cc0787a..56276b7 100644 --- a/boxes.js +++ b/boxes.js @@ -62,16 +62,24 @@ $(document).ready(function(){ }); //For all box divs, add a click handler that adds an image of a cute puppy to the box. If the image is clicked again, remove the cute puppy. - $('.box').on('click', function(){ - console.log('entering background change'); - var box = $(this); - if(!(box.hasClass('url'))){ - box.addClass('url'); - box.css('background-image', 'url(https://upload.wikimedia.org/wikipedia/commons/0/03/Lorem.gif)'); - } else { - box.css('background-image', 'none'); - box.removeClass('url'); - } + // $('.box').on('click', function(){ + // console.log('entering background change'); + // var box = $(this); + // if(!(box.hasClass('url'))){ + // box.css('background-image', 'url(https://upload.wikimedia.org/wikipedia/commons/0/03/Lorem.gif)'); + // } else { + // box.css('background-image', 'none'); + // } + // $(this).toggleClass('url'); + // }); + //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').on('click', function(e){ + if ((e.target).hasClass('box')){ + $(e.target).css('background-color','white'); + $(this).css('background-color','black'); + } else { + + } }); }); From be927299323c6249fd97ad4cfd50786110aa56a8 Mon Sep 17 00:00:00 2001 From: Roy Date: Tue, 7 Jun 2016 09:55:02 -0600 Subject: [PATCH 9/9] have working final solution --- boxes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/boxes.js b/boxes.js index 56276b7..cc60280 100644 --- a/boxes.js +++ b/boxes.js @@ -74,11 +74,11 @@ $(document).ready(function(){ // }); //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').on('click', function(e){ - if ((e.target).hasClass('box')){ + if (e.target === this){ + $(this).css('background-color','green'); + } else { $(e.target).css('background-color','white'); $(this).css('background-color','black'); - } else { - } });