Balanced Plates Meal & Calorie Planner

Overview

This project serves to showcase our work in creating a meal & calorie planner application, that allows the user to obtain their daily recommended calorie allowance depending on your age, gender, height, weight and daily activity level, and nutritional information about specific meals.

Our motivation for development was to provide a site that allows users to plan a diet which suits their lifestyle, whilst demonstrating our skills as collaborative developers. Our aim is to achieve simple and easy to use app to work out your total calorie intake depending on your daily meals.

User Story:

AS A health conscious person
I WANT to know nutritional information, tailored to my specific needs
SO THAT I can plan my meals accordingly

Features

1. Recommdended Calorie Intake Calculation:

   • Gives users the ability to calulate recommended calories based on physical attributes.

2. Total Calorie Intake Calculation:

   • Allows user to calulate total daily calorie ammount based on meal items and their respective weights.

3. Responsive Design

   • The webpage displays correctly and makes dynamic changes dependant on screen and window size. Application is mobile friendly. Browser icon is responsive to user's system settings for light/dark mode.

4. Macronutrient Charts:

   • Allows user to calculate their recommended Macronutrients and Actual Macronutrients by using the previous meal and user data.

5. FAQ Section:

   • Concise FAQ section for Users to get a better understanding of the application and how it can affect them.

6. FAQ Submission

   • Application enables the user to submit their custom question if it cannot be found in the FAQ section. This is then saved in localStorage.

Instructions

Calculate Daily Recommended Calorie Amount

1. Populate the "Tell us about yourself" form
2. Click submit.
3. Daily recommended calorie amount is displayed.

Calculate Total Daily Calories Consumed

1. Progress through the "Recommended Calorie" modal and enter the name of a meal item and its' weight.
2. Click add item to add it to the meal list.
3. Click reset, if you need to clear the Meal form.
4. Click submit.
5. Both calorie amounts are displayed.

Create Macronutrients Pie-Charts

1. Go through steps in above sections to retrieve calorie amounts.
2. Macro pie-charts are displayed under calorie amounts.
3. Hover over the pie-chart slice to get information about Macro label and percentage.

Submit FAQ

1. Go to FAQ section and input your question in the form field.
2. Click submit.
3. Your question will be logged to console, and also saved in localStorage.

Technologies/Resources Used

Front-End Technologies:

• HTML, CSS, JavaScript.
• jQuery - widely used JavaScript library.
• Bootstrap - Open-source CSS library
• Google Fonts - Free Open-source web-font Library
• Google Charts - Free resource for adding interactive charts for browsers and mobile devices.

APIs:

• Fitness Calculator API - Used for fetching Recommended Calorie Amount.
• CalorieNinjas API - Used for Calculating Total Daily Meal Calorie Amount.

Access

To view this project, the deployed site can be found at: https://nasinghw.github.io/Balanced-Plates-Meal-Planner
Link to GitHub Repo for this project: https://github.com/nasinghw/Balanced-Plates-Meal-Planner/

Website Screenshots

Initital Wireframe design

Collaborators

Narinder Singh:
GitHub: nasinghw

Arfin Tajammal:
GitHub: Arfinxx

Alexander Flaherty:
GitHub: Pazoraf

Roberto Medeiros:
GitHub: rober-web

Thomas Airey:
GitHub: aireytf

Udegbunam Chukwuemeka:
GitHub: emeka-egbuna

Credits

Sources referred to during development:

• Stack overflow
• W3Schools
• MDN Web Docs