Lab 1

Setup

1. Fork this project.
2. Clone your forked project (git clone https://github.com/winnipegrb/just_chew.git).
3. Check out the lab_1_prep branch (git checkout lab_1_prep).
4. Follow the steps in the README to get the app running (vagrant works with default configuration).

Lab

Header

1. Open app/views/layouts/_header.html.slim.
2. Replace the .navbar-brand link text with an image:

• Use the provided Just Chew logo (app/assets/images/logo.png).
• Specify a width of 80 and a height 40 for the logo image.
• The image should have an alt attribute value of Logo.

3. Add another nav item to the .navbar-nav list:

• Make the nav item float to the right with the .float-xs-right class.
• The nav item link href should be an empty hash (#).
• The nav item text should be Log In.

Footer

1. Open app/views/layouts/_footer.html.slim.
2. Replace the .navbar div with the following:

• Create a div with an ID of #copyleft.
• Inside the copyleft div, create another div with a class of .navbar.nav-inline.
• Inside the navbar div, render a copyleft icon with the current year.

3. Above the copyleft div, add the following:

• Create a div with an ID of #social-media.
• Inside the social media div, create another div with a class of .navbar.nav-inline.
• Inside the navbar div, add the following links:
  • Create 3 links with icons for twitter, facebook, and google-plus.
  • Make sure these links have a class of nav-link.
  • Make sure these link icons have a class of fa-2x.

Banner

1. Open app/views/application/welcome.html.slim.
2. Replace the .welcome header with the following:

• Create a div with an ID of #main-banner.
• Inside the main banner div, create an h1 with a class of .display-3 and text Order delivery or take-out!.
• Below the title heading, create an h2 with a class of .display-4 and text Choose from a variety of local restaurants.
• Below the subtitle heading, using SimpleForm, add the following:
  • Create a search form with a method of get and a class of .form-inline.
  • Add an address input to the form with the placeholder 123 Fake St..
  • Add a submit button to the form with the value Go and class .btn.btn-primary.

Cards

1. Open app/views/application/welcome.html.slim.
2. Below the main banner, create a div with an ID of #cards and a class of .row.
3. Inside the cards div, add the following cards:

• Using the provided #welcome_cards helper, loop through cards.
• Inside the cards loop, create a div with a class of .col-xs-4.
• Inside the column div, render the provided _card partial passing the current card as a local variable.

Marking

Once you've completed all lab sections, run the project's test suite with bundle exec rspec. Once RSpec is finished, you will receive a percentage mark based on what tests pass and fail. If you got anything wrong, don't give up! Keep refactoring your code until all tests are passing.

Resources

• https://github.com/slim-template/slim#syntax-example
• http://guides.rubyonrails.org/action_view_overview.html#overview-of-helpers-provided-by-action-view
• http://api.rubyonrails.org/classes/ActionView/Helpers.html
• https://github.com/bokmann/font-awesome-rails#helpers
• https://github.com/plataformatec/simple_form#usage
• http://api.rubyonrails.org/classes/ActionView/PartialRenderer.html