| 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
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/ unless otherwise noted.
When you click on a color page, your background color should change to match the name of the color in your url path. Each file has some JavaScript that should do this update when the page loads, but because of Turbolinks, our pages never load! Can you fix the current javascript? (Your homepage should not be teal!)
In order to fix this problem, you'll need to understand Turbolinks. In particular, you may wish to read this documentation on the way that Turbolinks handles page loads & refreshes.
Once you have your initial solution working, consider:
- 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)
window.location.pathname
// or, just
location.pathnameHint: How would you grab the color for the current page from the path? (Click Here)
location.pathname.split("/")[1]; // warning: returns "" if path is "/"!The counter should increase for every individual page view, but (surprise) it's also broken because it doesn't correctly handle Turbolinks. Can you fix the current JavaScript?
- Do all the numbers reset when you refresh? (good!)
- Do specific numbers increment on each pageview?
- Do all the numbers show up on every page you visit?
- Is your solution DRY?
Page Specific CSS: Can you think of a way to get the desired "Color Changer" behavior (from Challenge #1), without using any javascript? (For this challenge you should only modify application.html and any css files).
Hint: Namespace your CSS to only apply to certain pages.
Identify the current page by giving the body a class with the name of the current controller & method:
<!-- app/views/layouts/application.html.erb -->
<body class="<%= page_specific_identifier %>">
<!-- ... -->
</body>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!" whenever a user lands on /goldenrod for the first time (but not when they click through).
Remember that a visitor has already been welcomed, and do not welcome them again!
Hint: Hmm, how would you remember that on the front-end? (Click Here)
Use a cookie, or localstorage!
