Giter VIP home page Giter VIP logo

coffee-partner-projects's Introduction

Coffee Project

Congratulations! You have landed your first development job! You have inherited a project from Fancy Coffee Company©, and they want you to make improvements to it.

Setup

  1. Create a Github organization and add your teammate.
  2. Fork this repository (Click on the "Fork" button on the top right of this page) and select the new organization as a destination.
  3. Clone the forked repository from your organization.
  4. Open up the HTML file and check out the existing application.
  5. Read through the code and understand the existing code structure before you start to build the features.

TODO

  • Update the HTML

    Tables are a little old school, you need to refactor the code so that each coffee is displayed in a div that contains a heading displaying the coffee name, and the type of roast in a paragraph. Don't display the ids, these are only for our application's internal use

  • When the page loads, the coffees should be sorted by their ids in ascending order

  • Add functionality to search through the coffees by name, and display only the coffees that match the provided search term (You will need to add an input field to the existing form for this)

  • Add functionality to update the displayed coffee as the user types into the search box, or as soon as they select an option from the select.

Bonus

  • Add an option to select all roasts for roast type

  • Make your name search case insensitive

  • Allow the user to add new coffees to the page

    Create another form on the page that has an input for the coffee name, and a select to choose the coffee roast. When the form is submitted, the new coffee should appear on the page. (Note that any new coffees you add will be lost when you refresh the page, for an extra challenge, research how localStorage works and see if you can find a way to persist the data)

  • Style it!

    The page looks pretty plain as it is, and the refactoring we did above to use divs for coffees should give us more flexibility in styling. (Hint: the styling shown in the example below can be achieved purely with bootstrap classes, that is, without custom CSS)

Example

Here is an example demonstrating the above functionality. Your application might look different, but should have the same features.

Cofee Project Demo

coffee-partner-projects's People

Contributors

johnwmcnay avatar biancareusch avatar zgulde avatar fmendozaro avatar

Watchers

 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.