Skip to content
No description, website, or topics provided.
CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.firebase
.idea
css
images
node_modules
script
scss
.firebaserc
Code_challenge_Ming_Wang.zip
README.md
firebase.json
gulpfile.js
index.html
package-lock.json
package.json

README.md

Vanilla JavaScript Code challenge:

Requirements:

  • Using the json file provided below, given an input of products, design a page that:
    1. Consumes the JSON of products
    2. Builds the product details page with all products
    3. Displays the product details, including price, product name and the main hero image
    4. Interacts intuitively; if you click on the image, you should see an overlay with a carousal of all thumbnail images
  • JSON URL: https://www.westelm.com/services/catalog/v4/category/shop/new/allnew/index.json

Install proejct:

  • node.js
  • npm

Install gulp & sass:

  • npm install gulp-cli
  • npm install --save-dev gulp gulp-sass browser-sync

Run the projetc at local:

  • Please to run Chrome browser without CORS first:

    open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir -–allow-file-access-from-files --ignore-certificate-errors

  • run project: gulp watch

Download the project:

Code and Layout Design by Ming Wang

You can’t perform that action at this time.