Coder Social home page Coder Social logo

fruits-and-veggies's Introduction

#Fruit and Veggies

The goal of this assignment is to build a simple game to help people learning to differentiate between fruit and vegetables.

The app should be built entirely using AngularJS (no jQuery).

###Hints

  • All 3 lists should be in the same controller. ng-repeat is your best friend.
  • A test file is provided for you, which only has a few fruits and veggies. This will make testing easier, because fruit_and_veggies.js has quite a few fruits and veggies!

##Final Product

Mockup

##Requirements

A 3 column layout using Bootstrap has been created for you.

####Column 1: Fruit

  • Empty when the app loads
  • Each item has a right arrow which when clicked will remove the item and move it back to the middle column (column 2)

####Column 2: Fruit and Veggies

  • Contains all of the fruit and vegetables when the app loads (combined and shuffled randomly)
  • Each item has a left and a right arrow
    • Left arrow removes the item from this list and puts it in the left (Fruit) list.
    • Right arrow removes the item from this list and puts it in the right (Vegetables) list.

####Column 3: Vegetables

  • Empty when the app loads
  • Each item has a left arrow which when clicked will remove the item and move it back to the middle column (column 2)

Once all fruit / vegetables are sorted (the middle list is empty) all incorrect items in the other two lists should be highlighted in red. If all of the items are in the correct list the app should tell the user that they won.

##Bonus

Add an up / down arrow to each list item in the fruit and vegetable list (not the middle list) which when clicked will move the item up / down the list.

Require the user to alphabetize the list after sorting in to vegetables / fruit.

fruits-and-veggies's People

Contributors

bhague1281 avatar

Watchers

k-lov 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.