Coder Social home page Coder Social logo

whats-for-dinner's Introduction

What's for Dinner?

Overview

What's for dinner? The ultimate question. This app helps users answer the question by suggesting sides, mains and desserts.

Hungry? Check it out.

The spec for this project can be found here.

Features

Image of landing page for What's For Dinner

When you first visit What's For Dinner you are prompted to select what kind of meal you are looking for- side, main, or dessert. When you have selected your meal and click "Let's Cook" the cookpot image in the right box disappears and you see a randomly selected recipe.

Two buttons appear as well: one allows you to add the current recipe to your favorites, and another will clear the selection.

Gif showing user favoriting a recipe Mmm... dessert.

When you click "View Favorites" you are taken to another page which displays all of the recipes you have added to your favorites. A button appears next to each recipe which allows you to remove it from the list when your tastes change.

Screenshot showing user removing a recipe from favorites Yuck, salad.

Another small feature, is that some error handling is incorporated into the homepage to prevent empty form submission.

Contributors

This was a solo project implemented by Claire Fields, a Mod 1 Front End Engineering student at the Turing School of Software and Design. The design comp was provided by instructors at the Turing School, Claire wrote all of the HTML, CSS, and JavaScript.

Technologies Used

HTML, CSS, Vanilla JavaScript.

Future Additions

Some possible future additions include:

  • An "Entire Meal" button which will display a random side, main and dessert.
  • The ability for users to add their own recipes to the database, or delete recipes they don't like
  • A login page
  • Some JavaScript to ensure that a user never sees a repeated recipe until they've seen them all
  • A "View all Recipes" button
  • Local storage, so that the user's favorite recipes will persist, even if they reload the page.
  • The option to click on a recipe and see an actual recipe instead of just a recipe name.

whats-for-dinner's People

Contributors

clairefields15 avatar hannahhch 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.