Git Product home page Git Product logo

shopping-list's Introduction

Shopping list & apples

Fork this repo into your GitHub profile

Shopping list

Create a widget that allows shoppers to create a shopping list.

Users should be able to add a total budget & topic word for the list.

Items added to the list should have a description and a price. The description and price should be displayed on the screen for each item.

The description of the items added should contain the topic word otherwise these items can't be added to the list. If the topic word is blank any description can be added.

Once the total price of the items on the list goes above the total budget display a message saying that the total budget has been exceeded. If the total budget number is updated the message should be displayed accordingly.

Make your code testable by putting the application logic in a Factory Function. Write tests using Mocha.

Do a paper prototype before you start and add that to your GitHub repository.

Extra features:

Only look at these if you have som time left

  • Storing the list state in LocalStorage.
  • Deleting items from the list.
    • register click event handler on containing element to determine which (using event bubbling)
    • use event.target to get the element that was clicked
    • Use data-attributes to find out which apple was clicked on.
    • Update the data in the Factory Function accordingly.
    • Re-render the screen

Apples

Given a list of apples that was sold by a local fruiter seller in this format:

const apples = [
	{
		color : "red",
		qty: 3,
		price: 5.25
	},
	{
		color : "red",
		qty: 5,
		price: 7.75
	},
	{
		color : "yellow",
		qty: 3,
		price: 4.80
	},
	{
		color : "green",
		qty: 3,
		price: 6.45
	},

]

Make at least 4 (four) of the tests in the test/index.html test/index.html pass.

The functions should do the following.

  • Calculate the total number apples sold.
  • Find the total income for all the green apples sold.
  • Calculate the total profit for all the apples sold.
  • Calculate the total profit from apples sold.
  • Calculate the total number of each color sold.
  • Calculate the total income per color sold.
  • Calculate the total profit per color sold.
  • Find the most profitable apple color sold.

When you are done.

When you are done please email [email protected] to request a code review.

You have time to complete this up until 17h00 on Monday 12 August - if you are done earlier that's great.

Please ensure you send the review request email before 17h15.

shopping-list's People

Contributors

jesseessop 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.