/whats-for-dinner

Primary LanguageJavaScript

Title: What's on the Gilded Menu?

A [Front-End Project] by: [Beth Meeker] (https://github.com/Meekb) Project forked from Turing School of Software & Design, GitHub

Index

  1. Overview
  2. Functionality
  3. Iterations
  4. Technologies
  5. Resources

Overview

It's time to transport your family to a Gilded Age high society ball! This web application focuses on Nineteenth Century American cuisine. Whether you want an idea for a single menu item, or a recommendation for an entire high society meal, this application has got you covered. It's time to toss out that boring old recipe book and click "Let's Cook!" to see what unique culinary masterpiece may be your new social capital at the Society Ball.

Functionality

  • "Add Recipe" button displayed with limited opacity to signify inactive
  • Radio buttons de-activate when one is selected
  • If no radio buttons are selected, and the "Let's Cook!" button is clicked, an alert will be given to the user to "Tell us what you are looking for!"
  • Once an option is selected and the "Let's Cook!" button is clicked, a randomly generated recipe will be displayed in place of the Cookpot icon on the right
  • If the "Entire Meal" option is selected, a randomly generated full meal option will be displayed in place of the Cookpot icon on the right
  • When a recipe is displayed, the "Let's Cook!" button is deactivated, and indicated as such with a limited opacity
  • When a recipe is displayed, an additional button will be displayed
  • The "Clear" button will reactivate the "Let's Cook!" and radio buttons on the left

Future Improvements

  • Redesign the application to replicate a menu from a real high society ball
  • Add a 'Favorite' button to the Entire Meal option, allowing the user to store the meal in localStorage so the data persists upon revisit
  • Add a 'Home' button allowing the user to return to the main page area
  • Fully responsive for mobile usage

Setup / Deployed Page

  • Clone this repository to your local machine
  • cd into the project
  • Type open index.html to view the project in your browser
  • OR you can visit my deployed project: What's on the Gilded Menu?

Technologies

  • HTML
  • CSS
  • JavaScript
  • GitHub
  • Atom

Resources

  • The spec for this project can be found here.
  • I used https://css-tricks.com/ to learn about keyframe animation and media queries
  • JavaScript & jQuery: Interactive Front-End Web Development, by Jon Duckett