This application aims to help answer the eternal question, What's for dinner? Based on the user's selected meal category - Sides, Mains, or Desserts - the application randomly proposes a meal to alleviate decision fatigue. Not happy with the proposed option? Randomize again until you find a meal that sounds appealing. The app comes pre-loaded with over 40 meal options plus the ability to add, edit or delete meal options to suit your tastes. Built using CSS Flexbox, the responsive app design works on a range of viewports.
To use this application:
- Open the repo in Github: https://github.com/tialaaa/whats-for-dinner
- Use the terminal to clone the repository to your local machine
- Navigate into the project directory
- Run the command
open index.htmlto open the app in your browser
This project was completed during my third week of learning at the Turing School over the course of 6 days (~23 hours). At that point, I had a couple weeks of Javascript experience and was just beginning my journey with HTML and CSS.
Solo project by Tiala Young: https://github.com/tialaaa
- Gain experience building an application that utilizes HTML, CSS and JavaScript
- Write HTML and CSS to match a provided comp
- Understand how to listen to and respond to user events
- After the base app (Homepage with meal randomizer) is completed, add an additional feature of your choice (All Recipes page with add/edit/delete functionality)
This was my very first app built from scratch using HTML, CSS and Javascript. Given how new I was with using CSS and HTML, it was a win to implement consistent styling that matched with the provided comp without sacrificing functionality. I'm proud of how thoughtful I was about the user experience and potential edge cases. For example, I chose to disable specific buttons until the user fulfilled necessary requirements; Edit and Delete are disabled until a user has selected a meal from the list, and a meal cannot be manually added until the user gives it a name. There is also built-in data validation to ensure meals cannot be duplicated within the same category list. Though these features added complexity and working time, I felt that they were important to include.