Skip to content

almost wrapped up #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
S204STi wants to merge 9 commits into
base: master
Choose a base branch
from
Open

almost wrapped up #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
edc7a2f
init commit
S204STi Jun 6, 2016
5edeee4
up to changing classes
S204STi Jun 6, 2016
b15d3ad
fixed a bug in my previous solution
S204STi Jun 6, 2016
a605ce1
squashed non-special .box divs
S204STi Jun 6, 2016
2f5e539
working x/y axis reader
S204STi Jun 6, 2016
f2807c5
able to prevent default
S204STi Jun 6, 2016
79e8d07
working image toggle
S204STi Jun 7, 2016
55559c7
working on last exercise
S204STi Jun 7, 2016
be92729
have working final solution
S204STi Jun 7, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions boxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="boxes.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Boxes!</title>
</head>
Expand Down Expand Up @@ -34,5 +32,6 @@
</div>
</div>
</body>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="boxes.js"></script>
</html>
86 changes: 85 additions & 1 deletion boxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,85 @@
console.log("hello world");
'use strict';



//alert when loaded
$(document).ready(alertReady);
console.log('document is ready');
function alertReady(){
alert('ready for DOM manipulation');
}

$(document).ready(function(){
//change css and add h1 to secretBox
console.log('entering secretBox');
$('#secretBox').css('background-color', 'white');
$('#secretBox').append('<h1>Secret Box!</p>');

//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).removeClass();
console.log('removed original class of boxtype');
$(row1).addClass('box 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');
// });

//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);
});

//Add links inside all red box divs that take the user to galvanize.
$('.boxType1').append('<a target="_blank" href = "http://www.galvanize.com/">werds</a>');
//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.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 === this){
$(this).css('background-color','green');
} else {
$(e.target).css('background-color','white');
$(this).css('background-color','black');
}
});

});
4 changes: 2 additions & 2 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down