Code Monkey home page Code Monkey logo

return-items-page's Introduction

Bonsai Interview Test

The goal is to create the single page provided in the /docs/ folder of this repository. This is intentionally stripped down to allow for better inspection of your core skills and intuition.

The single page should look like the following:

Main Page

The following should be noted:

  1. The back button does not need to work.
  2. The 1 of 3 does not need to be hooked up to anything.
  3. All other numbers and values on the screen should be hooked up to the real data being pulled in.
  4. An order contains several merchantOrders which will each have a heading separating them, in the mock-up you can see this listed as Seller A.
  5. The footer listing Terms and Conditions > does not need to lead anywhere. If you want bonus points you can create a new api method for generating a Returns collection document. And, have that footer create the document.
  6. The Talk to Someone button should open the help modal. (/docs/help-modal.png)
  7. The Call Us button does not need to work.
  8. The Close button should work.
  9. The quantity button should open the quantity selection drawer from the right side. (/docs/quantity-drawer.png)
  10. The back arrow button on the quantity drawer should close the drawer.

Updates based on the answers to my questions:

  1. 'Help Modal': it should be a pop-up, it should not fill all screen;
  2. 'Return Quantity': the user should be able to select the quantity and click 'Apply Changes'. After that, numbers '2 of 4' (the ones near the Seller A), should change to his selected value (X of 4);
  3. 'Return Quantity' and 'Checkbox': when the user selects the quantity from the drawer, the checkbox should become checked and overall quantity should recalculate;
  4. 'Return Quantity' and 'Checkbox': when the user deselects the checkbox (which was previously checked), return quantity should become '0 of X' and overall quantity should recalculate;
  5. 'Checkbox': if the user goes to the page, does not select anything from the drawer and just clicks on the checkbox (which is not checked), the highest possible value for that item should be selected and overall quantity should recalculate.

Help Modal

Help Modal

Quantity Drawer

Quantity Drawer

The following will be considered:

  • Understanding of frameworks, especially React.
  • Attention to detail
  • Coding style

Install

  1. Ensure npm is installed.
  2. Ensure meteor is installed
  3. meteor npm install

Run

  1. meteor npm run start
  2. View at http://localhost:3000/

It should look like this initially: How the page should look by default.

Lint

  1. meteor npm run lint
  2. Before pushing linting is automatically run.

return-items-page's People

Contributors

viktorija8902 avatar mackiedrew avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.