1. Participate
2. Complete the Challenge!

There are two ways to participate in our coding challenge:

• By cloning this repo and using the Github Flow
• By downloading the entire project directory as a compressed folder

We would like you to follow the Github flow to participate in the coding challenge if you are familiar with Git and its ecosystem. However, in case you are not familiar with Git, please feel free to download the project directory and then complete the Challenge

1. Clone this repository
2. Follow the Github Flow
3. Complete the requirements listed in the Challenge
4. Open a pull request!

1. Download this project direactory as a compressed folder (frontend-challenge.zip)
2. Complete the requirements listed in the Challenge
3. Email the compressed folder to [email protected] or to the person with whom you have been interacting!

Your challenge is to implement the following designs given in the below section and fulfil the functional requirements listed below. Implement the design using any one of the component based js frameworks. Popular component based js frameworks are React, Angular >= 2.. etc. Feel free to choose any other component based frameworks you are familiar with.

NOTE:

1. Implement this task using plain html, css(sass, less) without any css frameworks (like: bootstrap, materialize)
2. Do not use any eCommerce frameworks which are already available. Example for such frameworks for react are moltin, nicistore. Please do not use such frameworks.
3. Using css preprocessors like less, sass; task runners like grunt, gulp would plus point.
4. Please implement the design as it is! (This doesn't hold you back from changing the text or messages in the app - feel free to change the english as you want)

• Show list of items and "Your cart" sections as shown in below image. If none of the items are added to your cart, show message in the "Your cart" section as shown in the below image.

  NOTE: Data for item list should be passed through json, do not directly hard code the data items in the html.

  

• User can add or remove the items to Cart by clicking on Plus and Minus icons from both "Your cart" section and from the item itself - price in the "Your cart" section changes dynamically as number of items changes.

• Show progress bar above the "Your cart" section as shown in the image. This progress bar will be filled up dynamically as the items added to/ removed from Cart, where 100% filled progress-bar indicates the Rs. 2000/-.

  For example:

  • If the total amount of your cart is Rs. 100/- then 5% of progress bar will be filled.
  • If the total amount of your cart is Rs. 450/- then 22.5% of progress bar will be filled.
  • If the total amount of your cart is more than Rs. 2000/- then 100% of progress-bar will be fiiled.
  

• User can change the currency either to Rupees or Dollar using the switch as shown in below the image. On the change of the currency, update the price to that currency in "Your cart" section(Set Rupees as default currency)

• Enable checkout button only if the ordered amount is >= Rs. 2000/-.

• On click of "Checkout", show new page - which has form where user fills the name, email, phone number and pincode.

• Show the "Check" button beside to the pincode input field as shown in the image.On click of "Check" button make google api to get the address for that pincode and show the respose(address) in the text area.

• On click of "Place order" button, navigate back to shopping page and show the notification as shown in the below image

  

  After showing the notification(i.e after successfully placing the order), set the app to initial state.