Code Monkey home page Code Monkey logo

js-dom-greengrocers's Introduction

Greengrocers

In this exercise we explore a common scenario in eCommerce, adding and removing items from the cart, and calculating the total. You final solution should look like this:

Result

Learning Objectives

  • Implement a dynamic front-end app that uses shared state

Instructions

  • Use the index.html file as a starting point.
  • index.js contains the initial state - a list of items available to purchase and an empty cart
  • Images for each item are in the assets folder
  • The HTML required for the items in the list and the cart items are provided in the templates folder
  • Implement the following requirements
    • A user can view a selection of items in the store
    • From the store, a user can add an item to their cart
      • If the item is already in the cart, increase the item's quantity in the cart
    • From the cart, a user can view and adjust the number of items in their cart
      • If an item's quantity equals zero it is removed from the cart
    • A user can view the current total in their cart

Extended 1

  • Add filters to the store ie. filter by item type; when a user clicks a filter they will only see items of that type

Extended 2

  • Add sorting to the store ie. sort by price or sort alphabetically; when a user clicks sort they will see a sorted list of items

js-dom-greengrocers's People

Contributors

dearshrewdwit avatar dogezen avatar klimcuks avatar mikemherron 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.