/zemoga-ui-test-JAYN

Primary LanguageVue

ZEMOGA UI TEST by Juandres

Requirements

  • Node 16+
  • npm v6+

Instructions

  • Download the repo.
  • run npm install
  • run npm run dev

Test && Lint

  • run npm run test || npm run test:watch
  • run npm run lint

Deploy

Once a commit is done to master branch, a commit will automatically be pushed to Netlify HERE

Acceptance Criteria

Below you will find the minimum requirements we need to consider this challenge as completed 🎉

  1. The interactive component should meet the design criteria, which you can find below in the different required resolutions:
  2. In mobile version, cards should only be displayed as a list of cards, with horizontal scrolling and overflow.
  3. In tablet and desktop versions, user should be able to switch views between list view and grid view, using the dropdown menu, which should be located at the top right section of the component.
    1. If the list view is selected, all cards should be stacked vertically, according to the design specs.
    2. If the grid view is selected, all cards should be positioned as a grid of elements, according to the design specs.
  4. Each card should contain a gauge bar at the bottom, which will display the distribution of positive and negative votes as a percentage. (See assets/data.json for reference).
  5. Each card should contain three buttons: a "thumbs down" (yellow), a "thumbs up" (teal) and a "Vote now" button which should be disabled by default.
    1. If either "thumbs up" or "thumbs down" button is pressed, it should toggle the selected state of that button (denoted as a white border, see design specs for reference), and enable the "Vote Now" button.
    2. If "Vote Now" button is pressed, that vote should be posted, and three other things should happen:
      1. Eyebrow text should change to the copy "Thank you for your vote!"
      2. "Vote now" text should change to the copy "Vote Again"
      3. The gauge bar below should reflect the changes in the registered data and percentage should be updated.
    3. If "Vote Again" button is pressed, all buttons should return to the initial state, and all modified copy texts should be reverted to their original state. The gauge bar, however, should persist the votes already posted.
  6. All posted votes should be persisted by any means, and should be exactly the same count, even if the page is refreshed. Use any persistance mechanisms you prefer: LocalStorage, Cookies, IndexedDB, URL params, a Back End service (Firebase, DynamoDB, Redis, etc).