| Objectives |
|---|
| Explore javascript in rails |
| Discover Turbolinks & Turbolinks Events |
| Organize javascript to only execute on specific pages |
Terms:
- Javascript Events
- Event Listener / Event Binding
- Turbolinks
##Instructions
This lab does not have a database! Just clone, bundle, and run rails server. Then launch the home page ("/") in your browser.
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 "/"! ```
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?
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).
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)!
