Williams-Sonoma Coding Challenge

Given a JSON file of products, build a page that displays for each product:

• product image
• product name
• product price

Display all products on a multi-column, responsive, accessible, and attractive page. Upon selection of a product image, display an overlay containing a carousel of product images.

Technologies Used

Name	Version	Usage
Vue.js	2.6.12	production
Bootstrap	4.5.2	production
jQuery	3.5.1	production
popper.js	1.16.1	production
image-gallery-overlay*	1.3.2	production
jest	26.5.3	dev test
babel	7.12.3	dev test/build
webpack	4.44.2	dev build
postCSS	8.1.1	dev build

• image-gallery-overlay - an internally developed custom web component

Installation

git clone https://github.com/terrymorse58/wsi-coding-challenge.git
cd wsi-coding-challenge
npm install

Launching the Page

This project build is installed on the Terry Morse Software, Inc. server and may be run here:

WSI Coding Challenge @ terrymorse.com

Or the development version can be run locally :

npm run dev

Tests

npm run test

Directory Structure

 Project
 |-- build
 |   |-- index.html
 |   |-- wsi-products.json
 |   |-- css
 |   |   |-- wsiprods.css
 |   |-- js
 |   |   |-- products.js

Responsive Design

The page layout and dimensions of the product cards are responsive to viewport width changes.

The product card default width is 354 pixels, which will display 3 columns of cards on a viewport at least 1200 pixels wide.

When the viewport is 776-999 pixels wide, two columns will be displayed.

On viewports narrower than 776 pixels, the layout changes to single-column, horizontally centered product cards.

On viewports narrower than 396 pixels, the product cards shrink in size to fit the viewport width.

The image gallery overlay is responsive to viewport width and height.

Accessibility Design

To permit page navigtion without a pointing device, navigation is supported using tab, enter, and esc keys.

Pressing the tab key sets the focus on the next product card's image, and an outline indicates which card image has focus. Pressing esc removes focus from the product image.

When a product card's image has focus, the enter key opens an overlay which displays a carousel of product images.

When the overlay image gallery is displayed, esc closes it and returns focus to the product card image.

Styling

Styling is managed in wsiprods.css. To permit easy changes to the apperance, this file uses CSS custom properties (variables) for all the significant styles:

/* modify wsi styling here */
:root {
    --wsi-body-background-color: #f0f0f0;
    --wsi-container-background-color: #fff;
    --wsi-container-outline: 1px solid #bbb;
    --wsi-card-margin: 1rem 0.5rem;
    --wsi-card-width: 354px;
    --wsi-card-text-size: 0.85rem;
    --wsi-card-line-height: 1.2;
    --wsi-card-background-color: #fff;
    --wsi-card-border: 1px solid rgba(0,0,0,0.125);
    --wsi-card-hover-filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
    --wsi-card-hover-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
      0 6px 20px 0 rgba(0, 0, 0, 0.19);
    --wsi-card-hover-transform: scale(1.015);
    --wsi-card-img-focus-outline: 3px solid rgba(30,144,255,0.5);
    --wsi-card-flex-direction: row;
    --wsi-price-font-weight: 600;
    --wsi-sale-text-color: red;
}

For browser compantibility, the build version replaces CSS custom properties with static values.

Testimonial

This project was written entirely by me, Terry Morse, with no outside assistance.

Your comments or questions are welcome at tmorse@terrymorse.com.

Terry Morse
President
Terry Morse Software, Inc.
Palo Alto, California, USA
tmorse@terrymorse.com