Part 1 - Client-side Templating
Download the starter files.
Make an Ajax request to this endpoint and render each restaurant using client-side templating with Handlebars.js.
- Display
name
andcity
owners
should be rendered as an unordered listyelp
should be rendered as a link that opens in a new tab with the text "Check us out on Yelp"- Use a Handlebars helper to build a link to Instagram using the
instagram
property. The full URL will be something likehttps://www.instagram.com/{instagram}
. See the last example in the section "HTML Escaping" on the Handlebars documentation. - If
caters
istrue
, display "Caters". Otherwise, display "Does not cater". - While the response is loading, display "Loading..."
Part 2 - Ember.js
Create a new Ember app and install ember-cli-mirage
.
Build a mock REST API with Mirage for a product
resource for the following operations:
- listing all products
- viewing a single product's details
This API should have a namespace of api/v1.0
.
Use a Mirage factory and create randomized values for the following attributes using faker.js.
price
: useprice
underfaker.commerce
name
: useproductName
underfaker.commerce
color
: usecolor
underfaker.commerce
material
: useproductMaterial
underfaker.commerce
Also add an id
property as follows:
id() {
return faker.helpers.slugify(this.name);
}
This will build a URL slug from name
for id
. For example, if name
is "Incredible Soft Soap", id
would end up being Incredible-Soft-Soap
.
Next, build out the functionality for listing all products and viewing more details about a product.
The URLs for each page should be:
- product list - /
- product details - /products/:id
The product list page should only show name
and price
. The product detail page should show name
, price
, color
, and material
.
Create an About page with something unique. If you couldn't figure out anything in Part 2 of the midterm, explain yourself on the About page for partial credit.
Lastly, add a simple header, navigation, and footer that displays on all pages without duplicating code on every route template. The navigation should have links to the home page (the product list page) and the About page.
Submission
For part 1, zip up your folder and name it "part1.zip".
For part 2, zip up your folder and put it in Google Drive or Dropbox. Give me the proper permissions or make it a public link.
Email me both links.