Skip to content

Latest commit

 

History

History
97 lines (76 loc) · 3.34 KB

README.md

File metadata and controls

97 lines (76 loc) · 3.34 KB
Raw

Turbolinks Challenge

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/.

Challenge 1: Color Changer

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 2: Page View Counter

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 3: 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