This code test solution was written in React/JavaScript and built with Webpack. Styling was done with Semantic UI React and CSS.
Clone the repository onto your local machine. Then, run npm install
in the command line to install all dependencies.
To run the program, execute npm start
in the command line. It will start the local server and open up the app in a browser window.
This app is made up of five components. They are located in the src/components
folder.
App.js
The main parent component.
Container.js
The container for all other components. Keeps track of items added and renders child components inside a grid. Holds functions for adding/removing items and removing all items.
Item.js
This component represents a grocery item and is contained within the 'basket'. It has state to keep track of its amount, as well as functions to increase or decrease its amount.
ItemForm.js
Form for adding an item to the basket. Allows a user to enter information about the type of item they want to add. When submitted, the item is added to the state in Container.js and rendered by ItemList.js.
ItemList.js
Stateless functional component that renders Item components to a list.
src
Contains components, index.html, index.js, and stylesheet.
src/components
Contains React components.
root
package.json, webpack.config.js, README.md, and Node modules folder are contained at the root level.