Welcome Food Planner Application

Meal Plan.

Welcome to Meal Plan. https://jaredslocker21.github.io/mealplanapp/

Purpose

• Become organized at home and on the go. Create a memo and don't forget. Understand your body type and use the calculator to help understand your dietary needs!
• My inspiration for an app like this. Was to offer something of use and function.
• Not just another game. Engaging the visitor in an interactive and functional way.
• Also inspired by wikipedia in design and ease.

Goal

• Allow our visitors to become more aware of what they eat and help organize their food priorities and to help maintain good eating habits.

Demographic

• Our demographic is open for everyone.
  • Families who need a bit more organization.
  • Busy Parents
  • Students

UX/UI

Users Experience

• Users are welcome to experience a friction free, clean and easy to navigate website.

• Easy to access navigation bar.

• Find information on how to create better eating habits

• Create a Memo

• The calculator gives our visitors a better understanding of their diets.

• Short and clear descriptions.

• Returning visitors will be able to carry on and save more memo's.

• As a first time user:

  • I could navigate the website easily.
  • Make a memo
  • Delete a memo.
  • Use the calculator

• As a returning user:

  • I am able to return to the saved memo's in my cache.
  • You are able to use this tool from day to day.
  • Store recipes, caloric intake and more.

Users Interface

• As UI design my goal is to offer a simple , interactive, clean and trustworthy website.
  • Responds well to both mobile and laptop viewing.
• Fuctioning tool to be used on a daily basis-
• Simple to use and understand while, not too much content.
• Initial frame concepts uses Balsamic wireframes.
• Original Template was created by the Code Institute.
• Signle Clicks to add a Memo and Double Clicks to Remove a memo are easy to use and seamless.

Features

This website features multiple sections.

• This site is an informational site that feature an easy to use BMI calculator and a way to save your meals plans, make notes and keep organized by clicking to make a memo and double clicking to delete a memo.

Current Features

• Navigation Bar

  • First seen at the top of the website is our navigation bar with 3 responsive links. Home, Meal Plans, Therapy, What is BMI?

  • The navigation bar is clear, easy to read and to understand for all users to navitgate the website. Aria Labels are also added to the links in the navigation bar to allow for better access to those in need.

• The landing page image

  • The landing page is clean and easy to use. Instructionsa are clear and easy to use. The simplicity helps the user stay focused and organized.
  • BMI calculator is easy to Find and operate
  • The Create a Memo section is easy to find understand and use.

• Meal Plans Link

  • Meal Planning page is a short description to help the user further understand why meali planning is so important.

• What is BMI?

  • The BMI Page is a short description to help the user understand what BMI is and why we use it as a tool.

  BMI Calculator

• BMI calculator is used to generate a BMI calculation( Body Mass Index)

• Create a MEMO
• Creating a memo section. Has clear instruction on how to make and delete a memo.
• Memo's use a bright yellow color to be seen clearly.
• Shadow was added to create sense of depth
• The memo app save's to local storage and deletes from local storage.

Content

• Most content was written by myself and quoted content is cited on the site itself.
• Fonts were taken from Google Fonts

Media

• Create a MEMO and discover your BMI are tools too help organize. Interactions with the visitor are to be easy, clean and self explanatory.

Testing

• This website has passed all tests through Google Chromes Dev. Tool, 'Lighthouse'.

• I have tested the site on

• Microsoft Edge
• MAc OS
• IPhone XR
• Iphone Pro 12
• Pixel 5
• Samsung Galaxy
• Ipod air
• Ipod Mini
• Sufrace Duo
• Galaxy Fold
• Samsung Galaxy A51/71
• Nest Hub
• Nest Hub Max
• Mozilla Firefox.

• Google Chrome Dev. Tools Lighthouse Results

Validator Testing

• HTML All HTML Files Pass the validator https://validator.w3.org/

• CSS All CSS files passed through https://validator.w3.org/

• JShint Passes through JSHint with no major errors

Two warning about of unexpected use ~~ Math.floor symbols..

Technologies Used

• Github and Gitpod Cloud Development Environments.
• Google Chrome Dev Tools.
• Balsamic Wire Frames
• JShint
• techsini.com that is a multi device website mock-up generator.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

Credits

• W3School has been used for instruction and ideas for the overall page.
• Basic structure inspiration from other app-creators and tutorials.
• Tutorials and instruction from The Code Institute.
• Google tutorials and research, research, research.
• Google fonts Roboto Mono was used for the H1 and H2 while the font for the paragraphs is Sans Serif.

Google Fonts

Current Ideas

• javascript was pretty tough and outside of my comfort zone
• I learned a lot about the different uses of an API and local storage.
• Making a calculator helped me understand Javascript a little more.