Giter VIP home page Giter VIP logo

pantry-to-pan's Introduction

From Pantry to Pan

Introduction

  • When it comes to getting meals on the table, using this app will inspire your culinary senses and help you become the chef you've always wanted to be.
  • The purpose of this project was to allow students to practice some of the foundational concepts learned so far within the module. There are other extensions that test different skills that we can build on. The project allowed us to personalize/entertain different ideas with HTML/CSS as well as the functionality(JavaScript) behind the web page created.

Set Up

Backend Set Up

  1. Go to this repository
  2. Follow set up instructions.

Frontend Set Up

  1. Clone this repository to your local machine
  2. In your terminal, run:

npm install

npm start

  1. Enter the following url in your browser: http://localhost:8080/
  2. Enoy the app!

Technologies

  • Javascript
  • HTML
  • CSS
  • TDD (Mocha/Chai)
  • Fetch API

Illustration

Screen Shot 2022-07-18 at 11 28 03 PM

Features

  • Filter recipe options by meal category, type of meal or dish by clicking a checkbox.
  • Save recipes for later usage.
  • Return back to view all recipes
  • Use filter features among the save recipes

Deployed Page

Visit our published From Pantry to Pan site! here

Possible Future Extensions

  • A login page would be a great addition, allowing a user to log in to a page account and keep track of their save recipes.
  • Adding in transitions via CSS would have appreciated.

Sources

Contributors

Project Specs

  • The project spec & rubric for Part 1 can be found here
  • The project spec & rubric for Part 2 can be found here

Project Management

pantry-to-pan's People

Contributors

dinnek avatar drslmac avatar mayakappen avatar khalidwilliams avatar willhobson85 avatar hannahhch avatar niksseif avatar nikhil9999 avatar hfaerber 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.