5003-003 Project 1 - Manage Your Diet
===
[TOC]
## Codepen URL
https://codepen.io/iyy/full/MWewbVX
## Team Member
Abu Bagi, Yuan Yang, Junyu Wang, Rong Sang

## Introduction
Problem:
Diet is closely related to people's physical condition especially for someone who is in poor health. Nevertheless, everyone has or had some certain diseases more or less. And the recommended or not recommended foods vary from person to person according to their respective health conditions.

User does not have an awareness of food's nutrition and is looking for a way to eat healthily by learning food knowledge, tracking daily meals and receiving feedbacks to manage his diet.

Most healthy diet and nutrition suggestions are made for mass audiences. However, people of different ages, weights, heights and health conditions actually need different advice based on these factors. And it is difficult for users to consider all these factors at the same time by themselves to choose proper foods.

Manage Your Diet (MYD) is a Web App that:
- helps the user plan daily meals from a pool of ingredients
- calculates the daily intakes of nutrients according to meals
- recommends a healthy intake and suggest alternative items
- documents the user's diet and provides daily and weekly reports
- provides health tips and general suggestions according to diet and personal information (&health conditions)

Summing up, the app will serve as the user's diet diary, keeping a record of the users meals and their nutrients, but also interact with the user based on that and his or her health conditions.

## User Journey
Step 1: Sign up and log into MYD app
- Painpoint: User does not have an awareness of food's nutrition and is looking for a way to eat healthily by learning food knowledge, tracking daily meals and receiving feedbacks to manage his diet.
- Touchpoint: User signs up and logs into his own account, where his personal data can be collected and converted into customized report and suggestions to help the user.
- Channel: Sign up and log in page (does not show on our website page).

Step 2: Fill in personal body and health conditions form
- Painpoint: Most healthy diet and nutrition suggestions are made for mass audiences. However, people of different ages, weights, heights and health conditions actually need different advice based on these factors. However, it is difficult for users to consider all these factors at the same time by themselves to choose proper foods.
- Touchpoint: After log into the app, there will be a form appears where user can input his age, weight and height in the form. He can also click the checkbox if he has the disease.
- Channel: Registration on homepage

Step 3: Interact with ingredients to know their nutruitions and receive feedbacks
- Painpoint: It is not convenient for users to do research of each ingredient and do calculatation before they eat. Users quite need to have a tool that can help them quickly get sense of food's nutrition information as well remind them if the ingredients are not good for their health.
- Touchpoint: When user's cursor is on the picture of food, the detailed nutrition information will appear and show for the user. He can have a quick understanding of the food's nutrition. If the food is not good for his health, the user will be alerted to avoid selecting this ingredient.
- Channel: Information of ingredients in Today's Plate section

Step 4: Select each meal's ingredients and keep records
- Painpoint: User wants to record what he eats everyday and be aware of the nutrition he takes in without spending too much time on it. He is looking for an easy way to help him.
- Touchpoint: If the user eat certain food, he can click the its picture. After selecting all plates, he can click save button and the website will record these datas for further use. At the same time, he can get the computered result of each meal's total nutrition in a bar chart compared with standard intake. He can also make some changes to his diet for the next day based on the data.
- Channel: Today's Plate section and bar chart

Step 5: Check diet diary to see periodical diet report and tips for diet
- Painpoint: User can easily know what he ate these two days but usually does not know what he has eaten in a period time. He is looking for a function to provide him with diet reports periodcally.
- Touchpoint: User can go to Diet Diary section and view his historical records. This section will present everyday's records, corresponding nutrition ratios and grades evaluating his meal.
- Channel: Diet Diary section

Step 6: Contatct us and Subscribe
- Touchpoint: If user has any questions or problems, he can contact us directly for more information with the help of our contact section. He can also subscribe to receive emails with his periodical reports, our activities and food or health knowledge.
- Channel: Contact section

---

User Journey Flow Chart:

---

## Behaviors of Components
### section-1 (Homepage)
This section is a guide to tell the users what the web application is and how many parts it includes. The users start their journey in the web application by interacting with the navigation bar.

---

There are five parts in our application, users can explore more about these parts if they click the corresponding links. When users' mouses cover one of the links in navigation bar, for example "Today's Plate", its color will be lighter, showing that your mouse have hovered this part. Then if users' mouse click on it, the link will direct users to the webpage of "Today's Plate".

---

Also, the dropdown of person-circle icon shows users that there is a place to log in or sign up. If users click on the icon, the dropdown link will unfold and show two parts: log in and sign up. If users haven't signed up before, they will go to sign up part, otherwise go to log in part. We suppose that the user is the first time to use our app, so he/she would click on "sign up" and the web will direct he/she to "health condition" page.

---

### section-2 (Registration)
This section actually includes two parts (sign up and log in). Considering that we should add the link to another codepen to achieve our original idea, we choose to demonstrate the most important and unique part of the registration step in our webpage.

That is the inputs of the users’ health condition when they sign up as new users. The app can get the datas about the users’ physical condition from their inputs (name + age + weight & height + medical history) and then do some calculation to evaluate the users’ health condition and give them the relevant diet recommendations and suggestions. Based on these inputs, in the other sections of this app, users will be alerted when they choose or have eaten some inappropriate foods and also get some diet tips in their diet diary.

To demonstrate the whole process of log in and sign up more clearly, we will go through the registration section detailedly with the existing webpage and the primitive layout in our design phase:

---


This is the page of log in. If the user have signed up before, he just need to input email and password. If the user is a new one, he can click the *No Account? Sign Up* link to jump to the sign up page.

---


In the sign up page, the new user should set his email and password.

---


When he click the *Sign Up* button. The page will jump to the input of his health condition. All of these infomation are required. In the *First Name*, the type of the input is fname. When the browser finds input forms with fname type, it will trigger the autofill feature and the user could click on his name from autofill list.

After his finishing all of these information input, the registration for a new user ends and he can start to utilize this app to manage his diet.

---


If the user want to log in or sign up again when he is already in the main page of app, he can click the head portrait.

---

### section-3 (Today's Plate)
This section is a window of communication between the app the user. The user starts by selecting ingredients and assigning them to their respective meals during the day (i.e. breakfast, lunch, dinner, and snacks). The app responds by showing the user if they went off the limit of the recommended daily intakes based on the users inputs (food items + health parameters + height & weight & age). Not only that, but the app provides the user with info about ingredients (upon request) so the user can make an informed decision.

Now we'll go through the section step by step:

---

Here, this nav bar is made to allow the user chose ingredients for each meal of the day.
* Upon clicking on a tab , it gets highlighted (class will be active while removing "active" from others, and will give the ARIA assitive feature a boolean value of "true") and will show the full item pool (yet for this meal only).
* If I choose items for breakfast and then click lunch, the items menu will clear up any selection related to breakfast and will start registering values for lunch. ((not exactly clear up items since their values are important for the breakfast tab, but will show a new set only related to lunch))
* If I go back to breakfast tab, breakfast items will get highlighted again.
* The class of the highlighted element will be "active" and clicking any other element will shift this class to it.

---
The list of ingredients are in grid mode by default (class=active), but if the user feels it is a bit crowded they can opt for the list mode (make its class ="btn active" and grid class will only be="btn" 'DOM-speaking'). Then the app will rearrange the list accordingly.

---

Since the list is supposed to be full of a wide range of items and subitems (e.g. cheese >> feta/ cheddar/ mozzarella / blue / ...etc.), it would be convenient for users to search for items through this search box.
* user will type in their search queries
* the app will grab the 'strings' entered by used to search the database
* the operation should be done automatically without the need for the user to finish a word or click ENTER
* the app will list all the items that any of its part starts with the string entered

---
** a snapshot of the food list **

The ingredient list is where the user go about selecting their daily meals (in relation to the 'breakfast/lunch/dinner' nav bar above).

* upon selection, the app will highlight the item (green border). Class will change into "selected"
`.selected {
border-style:solid;
border-color:green;
border-width:5px;
border-radius: 50%;
}`
* it will send its metadata to the other corresponding parts of the app (e.g. sending its calorie and fat values to the part of the app where it calculates the % of daily intake)
* clicking the food item again will unselect the item (release the "selected" class). So basically we can say clicking on an item will act as an ON/OFF switch for "selected" class
* the user can also click on the gram/liter value and modify it according to the actual value

another feature is the tooltip that shows upon :hover(ing) over the information icon.
* in case users want to know more about the nutrient values of an item before selction they can consult the info icon
* the cursor will turn into a (?) and a tooltip box with a msg will pop up

---

As the name tells, this will interactively show if the user is within or beyond the recommended daily intake of an element. It work hand in hand with the values of food items entered above in accordance with the physical information entered at registration (age/weight/height/health conditions).

For instance, the app would calculate something like a 26-year-old user who weighs 160 lbs and is 170 cms should not exceed 2200 kcalories per day. That will set the base value against which will be measured the total calorie value of all the items the user selected for the day. (Basically denominator and numerator)

---


The users will use these button to interact with the food list.
* save: it will grab all the items and register them as today's ingredients. Will save them into database.
* clear: will clear up the food list (clear all the "selected" classes)
* randomize: will suggest items to the user that within the daily intake limit if the users cannot decide on meals. Clicking it again will provide different meals' ingredients.

---

### section-4 (Diet Diary)
This section includes three parts:

---

The first part is the user's daily food list. When he choose the certain food in the *Today's Plate* section, it will also exist in user's diet diary. When he go through this part, he can clearly be aware of his daily diet.

---

The pagination components are here for users to choose the certain date of the food list. The app will demonstrate today’s food list by default. If user click Tomorrow button, the food list will be updated.

---

Each row is the specific information about one selected food. In this parent page, only the picture, name, quantity and the amount of kilocalorie of that food are showed. If user want to get more specific information such as the nutritional ingredients of this food, he can click the right arrow to go deeper into the child page of the food list.

---


The second part is the pie charts assessing today's nutritional ingredients and diet grade for the user. This evaluation is based on the specific ingredients of user's food intake and the inputs of his health condition in the registration step. Compared with the food list, this part will give user more professional and visual idea of their diet condition.

---


When the mouse hovers on the different parts of the pie chart, the app will have this kind of interaction with the user. We finish these two pie charts with the help of Google Charts in Javascript.

---

The third part is the tips for diet based on their inputs of health condition. So the user can pay more attention to some inappropriate foods or ingredients and have a more balanced and nutritious diet.

---

### section-5 (About)
This section is for users who want to know more information about this web application.

---

The users will click this button to interact with this section. If users click it, the passage above it will unfold, showing out the hidden part.

---

### section-6 (Contact)
This section includes all information if users want to contact with us.

---


Users will enter their email address here if they want to subscribe our web and receive any update information, and then they click the button "subscribe here", we expect a pop-up window saying "Subscribed successfully" to show up (like the following image).


---

## Reflection
---
In section-2(Registration), we have made some changes in our programming process. For instance, we had the pop-up window to give them suggestions for diet after the user submit the form of their health condition in the first edition. However, after our discussion, we found it might be offened for user. So we choose to omit the suggestions in the registration step and give them recommendations when they choose foods and check their diet diary. However, there is still a long way to go for us to refine it. Firstly, as mentioned above, we initially want to make another page for registration before the homepage. If we can do so, our app will be more professional and the homepage without this part will be more fresh and clean because they will not disturb each other. Secondly, the specific properties and values in the inputs of users’ health condition are very primitive now. If the app should utilize them to do calculation, the properties should have more dimentions and more detailed value choices.

In section-3 (Today's Plate), the initial idea was to allow the user to grab food ingredients and throw them at plates with meals' names. While this looked appealing at first, we did a quick user experience test and found that it was inconvenient. Grabbing and throwing items is an unpleasent experience especially if one does that on a daily bases. Also, it becomes even more problematic the smaller the screen (as in mobile phones). Instead, we tried a couple of ways of interactive selection and we opt for the currently-used one where items are highlighted upon selection.

In section-4 (Diet Diary), during the process of creating this section, we not only learned how to make tables and charts but also learned how to give users well-organized information. For instance, this section includes three parts: food list, nutruition ratio and score, and the tips for diet. At the begining, we just put all of them together without thinking too much. However, when we tried to use it from a new user's point of view and ask why the information were presented in this way, we began to think more. These information should be presented logically no matter whether users realize it or not. After our revision, users can see food list first, because these information directly come from their choice. Then they will see nutrition ratio which is based on their diets and their grades given by their daily ingredients intake. The *diet diary* section is heavily based on previous input datas. The food list needs datas from today's plate and the nutrition ratio and score need to be calculated based on food list datas. Besides, the diet tips needs internal algorithm to help. The algorithm can decide which suggestions to be provided according to both users' health conditions and their diets. These functions all require Javascript to implement. In the future classes, we are eager to learn relavant skills to refine this section.

In section-5 (About), we want users to click the "read more" button and the hidden passage will unfold. We add text-truncate value for the inline text but the position and size change automatically. We need to figure it out how to make the truncate text keep aligned with and as same font-size as the former texts. Also, the next step that we need to learn is how to make the hidden passage show up after users clicking the button.

We had an issue with the btn-primary blue color (and blue color/background-color on other parts too like in nav-bar and nav/link and even the anchors). We're using teal as our theme color and blue looked a little unpleasant and had an impact on the overall view of the web app. So we needed to override these css codes in their corresponding tags:

.btn-primary  {
     background-color: rgb(0,129,161)!important;
  border-color: rgb(0,129,161) !important;
}

That was one example of how we tackled that. !important was used to give this CSS piece priority that didn't have otherwise.

After finishing this project, we hope to improve not only our skillsets in writing code but also mindset of how to create good user interface and user expereince. The final website is the expression of our thoughts and ideas, we need to always think more about users and their needs, try to give them good experience when they are using our designed websites and products.