sf-wdi-labs / _rails_with_js_and_turbolinks

Deprecated version of the turbolinks challenge.

Turbolinks Challenge

Objectives
Explore javascript in rails
Make use of remote: true for unobtrusive improvements to your page
Discover Turbolinks & Turbolinks Events
Organize javascript to only execute on specific pages

Terms:

• Javascript Events
• Event Listener / Event Binding
• Turbolinks

##Instructions

Just clone, bundle, rake db:setup and then run rails server.

Challenge 1 - Whack A Mole

Use remote: true to make the delete request. Be sure to tie your javascript into the appropriate jquery_ujs ajax events.

Visit localhost:3000/whack_a_mole to get started. You should be able to gray-out the image and disable the button after each mole is deleted. Make sure the page isn't refreshing!

Challenge 2 - Color Changer

For this challenge you should work exclusively in your javascript directory: app/assets/javascripts/.

When you click on a color page, your background color should change to match the name of the color in your url path. Can you fix the current javascript? (Your homepage should not be teal!)

• Does it work on refresh?
• Does it work when you click through to the page?
• Is your solution DRY?

**Hint**: How would you grab the _path_ for the current page from the URL bar? (Click Here)

```js window.location.pathname // or, just location.pathname ```

**Hint**: How would you grab the _color_ for the current page from the path? (Click Here)

```js location.pathname.split("/")[1]; // warning: returns "" if path is "/"! ```

Challenge 3 - Page View Counter

For this challenge you should work exclusively in your javascript directory: app/assets/javascripts/.

The counter should increase for every individual page view. Can you fix the current javascript?

• Do all the numbers reset when you refresh? (good!)
• Do specific numbers increment on each pageview?
• Is your solution DRY?

Challenge 4 - Be More Specific

Page Specific CSS: Can you think of a way to get the desired "Color Changer" behavior, without using any javascript? (You may change only application.html and page specific css files).

**Hint**: Namespace your CSS to only apply to certain pages (Click Here)

Identify the current page using an html `class` attribute, an `erb` tag, and the name of the current controller: ```html ```
Reference the page specific `class` (i.e. the controller name and method name) in your stylesheet: ```css /* app/assets/stylesheets/name_of_controller.css */ body.controller_name.method_name p { /* * the styles inside here will only apply to p tags * that are nested inside body tags * that have the "page_specific_identifier" id */ } ```

Page Specific JS: Create a pop-up that says "Welcome to teh best page" whenever a user lands on /goldenrod for the first time (but not when they click through).

Bonus

Track Your Visitors: Rememeber that a visitor has already been "welcome[d] to teh best page", and do not welcome them again (they are already welcome).

**Hint**: Hmm, how would you remember that on the front-end? (Click Here)

Use a [cookie](http://letmegooglethat.com/?q=set+cookie+javascript+-w3schools), or [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage)!

Resources

• Turbolinks Events
• Conditional Execution of Page Specific Javascript