Git Product home page Git Product logo

ldcc-jacksonrgoodman's Introduction

JS HTML 5 CSS

Little Debbies Sorter

An NSS Project focusing on event listeners, database managment, and other concepts in javascript.

Installation

  1. git clone this repository
  2. run serve in root
  3. run json-server -p 8088 -w snacks.json in root/api
  4. go to http://localhost:5000/src/ and register a username

Contributing

Jackson Goodman

License

MIT

LDCC

Little Debbie's Collector Club

Each year, fans of Little Debbie (LD) gather to tell stories about the snacks they have encountered over the last 12 months. The annual dues allow the members to enhance the very popular, very sophisticated Little Debbie Collector Club (LDCC) website, which catalogs the details of their beloved LD snacks.

Currently, the LDCC members are not able to update or create new content themselves - they have always relied on us, the developers, to handle this functionality.

This year, however, they have a little more funding! So they’ve hired us to add some new features to the site, like the ability to update (PUT) and create (POST) content, along with a few other vital requirements...

We will be hiring an intern to add numerous snacks to the DB. If you would like to be considered, please send your resume to LD at LDCC.com

MVP Features

  1. Last year, they ran out of money before the details page could be completed. The first feature is to display the full value of each property on the details page(not the id). Hint: Use one of json-servers relationship features.
  2. Anyone visiting the site needs to log in, however there is only one admin, LD herself. Everyone else will not be an admin. This needs to be reflected in the data. Hint: you will need to add isAdmin: false to the register user object. Check your data for accuracy.
  3. The number of toppings has exploded! LD has been going over the top with so many variations... LDCC can barely keep up! To help out, it has been determined that there should be a list of toppings stored in the database, and there should be some way to mix and match the toppings with the snacks!
    • Each snack should be able to have multiple toppings, (or no toppings at all).
    • Each topping should be able to go on multiple snacks, (or no snacks at all).

Hint: What type of relationship will this be? What tables will need to be created in the database? Be sure to share your ERD with the instruction team.

  1. The snack detail will need to display all the toppings for the one snack. Make this a comma separated list in a paragraph.
  2. With the new topping tracking system, the club members would love to have the option to display snacks with particular toppings. Something like, show me all snacks with chocolate icing. The dropdown menu should read from the toppings list in the DB and be displayed in the navbar. The dropdown list of all toppings should trigger a call to DB for only those snacks and then display them.
  3. For the first time in years, LD has a new type of snack - cereal. It is expected that over the next few years the trend of new snacks will continue. The club would like the ability to add a new snack type to the type table in the DB. They have also requested that the new Oatmeal Creme Pie Cereal be added immediately to the list of snacks in the DB. You will need to make an object that includes the properties of the snack table in the ERD and post it to the DB with Postman.
  4. Only the admin user should have the ability to Add A Type. Currently the only admin is LD herself. Only display the Add Type if LD is logged in.

ERD

Before you begin any code, use the ERD script and paste it into DBDiagram. Complete the relationships based on the MVP requirements. Share with the instruction team to get an updated snacks.json file.

Bonus

  1. Add the functionality to add and edit a Topping - but only for admin users.
  2. Add the functionality to add and edit a snack - but only for admin users. This one is tricky since there is an option to have multiple toppings.
  3. Add the functionality to edit a snack - but only for admin users.

Notes

  1. Ask questions about the requirements to ensure you are meeting expectations.
  2. After you complete each feature add, commit, push, and merge to github.
  3. Share your progress with the instruction team.

To run this project

  1. run json-server in the API directory.
json-server -p 8088 -w snacks.json
  1. serve the index.html on your local machine.

This exercise utilizes the following:

  1. Javascript modules
  2. Javascript object fundamentals: properties, key, and value
  3. Adding/augmenting an object
  4. Loops/iteration
  5. Conditionals
  6. eventListeners
  7. Related data
  8. Filtering data
  9. DB calls: POST, PUT, GET.

ldcc-jacksonrgoodman's People

Contributors

github-classroom[bot] avatar jacksonrgoodman avatar

Stargazers

 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.