From 5028da34b1b62818c969412689021441d073508f Mon Sep 17 00:00:00 2001 From: Lauren Namba Date: Tue, 28 Feb 2017 16:36:31 -0700 Subject: [PATCH] first draft of jquery playground --- boxes.html | 2 +- boxes.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++- puppy.jpg | Bin 0 -> 1701 bytes 3 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 puppy.jpg diff --git a/boxes.html b/boxes.html index 44586a8..8a7b2cb 100644 --- a/boxes.html +++ b/boxes.html @@ -4,7 +4,7 @@ - Boxes! + Boxes!
diff --git a/boxes.js b/boxes.js index 6b2b3db..f86dab9 100644 --- a/boxes.js +++ b/boxes.js @@ -1 +1,61 @@ -console.log("hello world"); +$(document).ready(function(){ + alert("Ready for jQuery!"); + + // Find the secretBox on the page. Set the background color to white. Add an h1 tag that says, "secret box!" + $("#secretBox").css("backgroundColor", "white"); + $("#secretBox").append("

Secret Box!

"); + + // Find all child divs of the first row. Set the class for each div to boxType3. + $("#row1").children().addClass("boxType3"); + + // Make the last box in the last row disappear + $("#row4").children().last().css("display", "none"); + + // Change all red boxes to white. + $(".boxType1").css("backgroundColor", "white"); + + // Get the first two divs in the second row. Take away all styling from the divs. + $("#row2 div:first-child").attr("class", "box") + $("#row2 div:nth-child(2)").attr("class", "box") + + // 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. + $("#container .box").not("#secretBox").width("2px"); + + //Add an on click handler to the container div. Console log the x and y position of the click. + $("#container").bind("click", function(event){ + var container = $(event.target); + var offset = container.offset(); + console.log("x-position is: " + (event.clientX - offset.left) + " and y-position is: " + (event.clientY - offset.top)); + }); + + /* Add links inside all red box divs that take the user to galvanize. Then add an on + click handler that alerts the user that you can never leave the page. Make sure the + user won't leave the page after the alert! + */ + // $(".boxType1").append("Galvanize").on("click", function(){ + // window.onbeforeunload = function(){ + // return; + // } + // }); + + // 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").click(function(){ + if ($(this).html("")){ + // $(this).css("background", "url(puppy.jpg)") + $(this).html(""); + } else { + // $(this).html(""); + // $(this).css("background", ""); + } + }); + + $("#container").click(function(event){ + $(this).css("backgroundColor", "black"); + if ($(event.target).hasClass("box")) { + $(event.target).css("backgroundColor", "white"); + } else { + $(this).css("backgroundColor", "limeGreen"); + } + }) +}); diff --git a/puppy.jpg b/puppy.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7f04c713bd9ec2d45aa4b9fdb1d4a52de3b9c1dc GIT binary patch literal 1701 zcmb7^c~Dbl5Wv58Z;qN5U=(m;eCCfB3h;kf9S9l#(}dj)#;TfJO#pzz~5908E1r8l>z3diW^_kXqDk03a|5 z5de`yrcgC-gH8-U2>uR1i71JPl8Gr03=kTsrB5)Y8(>5SKMO{95|@<8DR5j_?r&Ld z7$Ib~C(E4*t&WgK0_=H_+Uuu^QYw6%WmyWNKrr(+uc3)?mu|=XkhU1@QasYPyIS`&B1k=(-Ipz*@g3!Rik6}-=t-BfYmf>iDmq5RlaeY< zQ!!;^Wgq>>RU|#}5v{Un5l+_7xX9PhxkT8%ggE+q5psH&@(FMPL>!5L5{Wn%iAbhm zR4Ro+Wvuv26Vqm}SlSFGlf9a!$JXVpVlp{vIb0)Sfr&szZ=G-*U&!MN_)0toL?V%> zWGbCXrSsWLHvfN%@-fgv)aj$)&Gnx8(2Dg{f9q)8x6i`0>sD;Kamlu~=_l*S+N%@R z^L|M~f7@+LIonn$+}Hd>gu9aQ0zm{gv_q@z)e*ldhAjuBTXv4~f+e?eO~&}l$Usjm zgE7I?hu7@SYL!Hr_92Xb?YX9Alc;QPi~g0jEf?0j@$oN`N2i{aw$z18hBlX<`9SMA z9YRmgRY%9$UIgV4wxv1G-J_e*x$qN8hK`$Cy!s=4EksahfLMD->N8aJoHZB;9XH_E zCiS=u*mo&`*U|xrBDmW%^HgA+{C!pa$saQ-TE9TkE$X+^Lnm&WaC9r59qq`$Lj3nL zn*`{6g{B?jaLbNE-ja<9d9_76JEuvJDyc#4#1~PeHCff(jqfC_4Yi?8YveUC#{`1u zO+{yS+hDt#yNpLowny@eA&1S9-Cw^xco^?wOH4H=V3pt<4FIeG(SW|WgI{=3WFv4Lzdt_`7uhh^ zFn_19$*Sns(~HQk5_D|SbGLTzdh}*(Z?b36Q1P_Ii(T{h&p-77mbKTW?WOOG3WKJ) zhzNjS0zQ54VM~DkP2U{DIXFpE1)1gb^7awMe=tt@~g~>vHk1o0O=tW^XglK+lcmFQa2GE_?p9=F0)0yICnRG+;H$y^tO!GcEW)Q3BoUyu&%9 z$@87vpzWP)&mJ+varUH{D`ukK*``W^yHDCle7FM(rkNuem)Q0?9xKT#DWg!Vh`34D zC8-2V7d7}Dqf;x&NUQ|hEpwTgZnGsRk(^n`j(0uMEjzk+6*-?S PW`$R$-5M5+D+m7t2pw9X literal 0 HcmV?d00001