100 Days of Code Days 3 and 4

Day 4: 4 October 2016


Today’s Progress: I went to InfoSci class today. When I got home, I ate, and went to work on the e-commerce site.

I migrated The Lens Cap over to a GitHub Project Page as Heroku became to fiddly. I had a bug in my mobile toggle nav and the CSS wasn\’t linked right. It seems I am not good with absolute and relative links.

I finally figured it out with some trial and error.

Thoughts: I\’m pretty proud of what I have so far. I need to build out the linked pages to reflect what I want them to do. I have Cart, Lenses, and Pricing. I also need to figure out where to link the View Details links under the lens grids.

Link to work: You can find it at The Lens Cap.

Day 3: 3 October 2016

Yesterday\’s Progress: I worked pretty hard on the navbar bug. I couldn\’t figure out why my CSS wasn\’t rendering in Heroku.

Thoughts: I\’ve been going at it pretty hard lately. I have a hard deadline for the first part of this CS project and I\’m hustling.

Link to work: Linked above.

Last Week\’s Code Productivity with RescueTime

Like I said, I\’ve driving pretty hard. Check out my productivity pulse on RescueTime:

Day 3: Event Handlers and Animations


I only did one jQuery class today as I had a lot to get done otherwise, but we went over documentation (which I never use the browser for because Dash) and preparing your prototype with comments, looking at your HTML file to see what you need to animate.

We went over manipulating the DOM (more on that in a moment) and Traversing the DOM and Event Handlers.

So you can manipulate the DOM with the [jquery].hide()[/jquery] method as well as the


. But we also added a button to the DOM in the HTML with this

$(".spoiler").append("<button>Reveal Spoiler!</button>");

Also we went over event handlers. So now that we have the button made in our HTML you can add a


with passing an anonymous function in order to do something when the button we made is pressed.


So in the code block with the button selector with the [jquery].click(function() {});[/jquery] you can do nifty things. So inside this code block we used


I hadn’t really gotten my head around [jquery]$(this)[/jquery] until he explained that since we had two


elements under the

<div class= "spoiler"</div>

we needed to specify which button the




when clicked. So I found that


is magical. So when I click on the first spoiler button, this knows what to do with it. It knows I’m not clicking the second spoiler button. It knows to hide remove the second one when I am clicking the first. Cool stuff.

It was a pretty easy lesson since I have gone over this on Codecademy and Free Code Camp. But refresher is great for reinforcement.