Lesson 9

This Lesson’s Focus: Javascript And jQuery (continued)

At CoderGirl

Course Work

Assignment: Use Console In Web Dev Tools

Do: Learn about how you can interact with your javascript in the 3 chapter of Web Dev Tools CodeSchool course.
CodeSchool - Learn Web Dev Tools - Chapter 3

Assignment: Cake Project - Alternating Tabs on Menu

Do: On the Menu Page, there are 2 tabs, Cakes and Other, that should list different items. Your challenge is to use jQuery and Javascript to transition between the two tabs. Don’t know where to start?! here is a suggested plan of action:

1) html - create 2 divs, one that holds the cake items and another that holds the other items.
2) css - show the cake div, hide the others div.
3) js - create a jQuery event handler, like .on(‘click’), that gets called when the others tab is clicked.
4) js - in that event handler, hide the cake div and show the others div.

I know what you are thinking… is it that simple?! yes. just kidding. I expect LOTs of questions in Slack. yeah Slack! (high-five).

These steps should get you started. Your final cake project should be able to toggle back and forth between both tabs. Bonus points, if you make them fade in and out (you would have to use css transitions).

Assignment: Cake Project - Submit Cake Order Form

Do: On the Custom Page, there is a form with name, phone, details and a submit button. Use Javascript and jQuery to make the submit button, pop up an alert to the user that says: “Thank you for your order, ..insert-name-from-form..! We will get back to you shortly”. Plan of action:

1) js - create an event that is triggered when the submit button is clicked.
2) js - grab the name from the form
3) js - alert the message to user
4) js - clear form

Assignment: CodeSchool - Web Animations

Do: For your next challenge, you should use css transitions… which you don’t know yet. So take the first two levels of this CodeSchool Course. Plus, it’s a good break from all this Javascript and jQuery.
CodeSchool Adventures In Web Animation

Assignment: Cake Project - Shrink & Fix Nav Bar on Scroll

Do: There is an example of what this is suppose to look like in the design files. Fixing the navbar can be done with css, however, shrinking and fixing is a different thing. Google will be your friend. Outline for plan of action:
1) js - create event that triggers when the window scrolls
2) js - use css transitions to shrink the navbar…
3) js - use change css to make navbar fixed…

Home