Snapline/eshop-test

interview test

Interview Test

1. npm i all dependencies
2. Type gulp on the terminal to start the task and localhost serving.
3. style the single card plan for desktop
4. Style dropdown for mobile responsive
5. Add Js logic as shown in the figma file or the video attached as a reference.
6. All html are create on Pug templating system
7. Once you are done. stop the serve and do a gulp build

Single Card Plan for desktop

1. Go to _components.scss, search for "promo-single-container" class. Style your single card plan under the class "card-plan". You can reference the design at:

   a. figma

   b. figma-prototype

Style dropdown for mobile

1. Go to _components.scss, search for "select-container" class. Style your dropdown under this class. You can reference the design and functionality at:

   a. figma

   b. figma-prototype

Add Js logic

1. Go to the js/page/plan-selection.js.
2. Add your logic here.

Video for reference

The interaction logic can be reference at the video-for-reference folder