- Write your own CSS and integrate it into the asset pipeline and use it in views.
- Write your own JS and integrate it into the asset pipeline and use it in views.
Located in this repository is a simple Rails application. Your goal is to create your own JS and CSS and include it into the application. You can run the Capybara spec when you are finished to test your solution.
First add the following JS:
- In
/app/assets/javascripts/create the filehide.js - Create the function
hideWhenClickedthat hides the element that was clicked.- Make sure to bind to
#hide_this
- Make sure to bind to
- Add
hide.jsto your JS manifest.
Note: If declaring any variables in your JavaScript file, use var instead of let or const or else Capybara will throw this error:
Capybara::Poltergeist::JavascriptError:
One or more errors were raised in the Javascript code on the page. If you don't care about
these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (s
ee documentation for details).Next add the following CSS:
- In
/app/assets/stylesheets/create the filelinks.css - Create a CSS class called
.errorthat changes the color of the text to red. Add this CSS class to the link on the root page. - Create another CSS class called
.cool-backgroundthat makes the backgroundgrey. Add this CSS class to the<body>tag on the application layout. - Add
links.cssto your CSS manifest.
If you receive this error:
Could not find an executable ["phantomjs"] on your path.
Install it with: `# Your Own Js And Css In Rails
- Write your own CSS and integrate it into the asset pipeline and use it in views.
- Write your own JS and integrate it into the asset pipeline and use it in views.
Located in this repository is a simple Rails application. Your goal is to create your own JS and CSS and include it into the application. You can run the Capybara spec when you are finished to test your solution.
First add the following JS:
- In
/app/assets/javascripts/create the filehide.js - Create the function
hideWhenClickedthat hides the element that was clicked.- Make sure to bind to
#hide_this
- Make sure to bind to
- Add
hide.jsto your JS manifest.
Next add the following CSS:
- In
/app/assets/stylesheets/create the filelinks.css - Create a CSS class called
.errorthat changes the color of the text to red. Add this CSS class to the link on the root page. - Create another CSS class called
.cool-backgroundthat makes the backgroundgrey. Add this CSS class to the<body>tag on the application layout. - Add
links.cssto your CSS manifest.
If you receive this error:
Could not find an executable ["phantomjs"] on your path.
Install it with: brew cask install phantomjs
View Your Own Js And Css In Rails on Learn.co and start learning to code for free.