# Web App UI
### Group members: Ada Zhou, Yajuan Wu, Aixue Zhang
### Project name: Everyday Calorie
---

## The Output (website result):
### Doodle Link: https://codepen.io/az2725/pen/XWqogQe

*Figure 1: The overall website appearance.*

## Navigation:

### 1. Logo:
:::success
We made a straightforward logo to show our users the function of our website -- **tracking your calories!**
:::

### 2. Search Bar:
:::success
The search bar allows users to look up food calories by entering text input.
:::

### 3. Log In:
:::success
Click on Log In button will cause a Bootstrap collapse; the username label and password label will be collapsed, so that users can enter their username (email input) and password (number input) to log into their accounts and, therefore, to keep records of their information and progress.
:::

## Progress Bar:
### 1. Calorie
:::success
The calorie progress bar can let users visualize how many calories they've got in total for the day and how many calories are left that they can still take. By adding calorie amount through `Add Food Calories`, this progress bar is supposed to be triggered by it and will display the corresponding value in the bar (since we haven't learn about Javascript yet, so we are confused about how to make it work, see more function explanation in Add Food Calories part).


*Figure 2: imagining how our progress bar is going to work*
:::

### 2. Water
:::success
The water progress bar can let users visualize how much water they've got in total for the day. By adding water amount through `Water Intake`, this progress bar is supposed to be triggered by it and will display the corresponding value in the bar, just serves the same function as the calorie bar.
:::

## Select Your Mode:
::: success
* When computer detects the `Select Your Mode` button toggled, the botton will expand and shows 3 dropdown options, namely `Diet Mode`, `Normal Mode` and `Cheat Day Mode`.

*Figure 3: The dropdown menu of mode options*
* Users can decide which mode to choose and once they triggered one mode, the toggled button will link they to a **corresponding modal**, which indicates the **maximum calory intakes** they can have in this certain mode.

*Figure 4: The Healthy Diet Modal and its content.*

*Figure 5: The CheatDay Modal and its content.*
* When the users click on the `Close` button, then this modal will simply disappears and allows users to consider their preferred mode. When the users toggled `Save changes` button, then the preset maximum calories (number) will be assigned as the max value (number) of the calories bar.
* After users input calories (string) in `Add Food Calories` section, these input numbers (string) will be coverted into numbers (number) and added up to calculate the overall calory intakes (number). Then a logical judgment will be operated to compare the **assigned max value** and the **calculated summation**, if, at any time the calculated summation exceeds the assigned max value, an `Alert` will pop over to the right side of the `Calories` badge, to remind the user has taken too much calories today.
:::

## Add Food Calories:
:::success
1. Users can click on the Add Food Calories button to record daily calorie intake.

*Figure 6: a live demo modal button for adding food calories*

2. Then it pops up a modal where users are asked to choose food source. The dropdown box include six categories, **Dairy, Fruit, Grian, Protein, Snack, and Vegetables**. The order is alphabetical.
*Figure 7: Food categories*
3. Users would input the food calories amount by kcal unit in the next section. Then the amount of calories would add up to the calorie progress bar on top of our website. In addtion, different category would present in different color inside the progress bar. For example, I had 750 kcal of protein, 300 kcal of vegetable, and 500 kcal grain. Then the progress bar would have 750 kcal in red, 300 kcal in green, 500 kcal in brown. See example in figure 2. (We haven't figure out how to do so, it definitely requires Java.)
4. We also have a upload image feature for users to select their food image of that calorie input. Thus, users can remember what they have had for meals that day.
:::

## Water Intake:
:::success
- This button can let users record their daily water intake.

*Figure 8: A live modal button for adding water amount*

- Click on the button will cause a Bootstrap modal. Users then can enter the amount of water they've taken using the number input.

*Figure 9: The modal for adding water amount by entering number input*

- After done with entering the water amount, users can click `Add` to save changes to trigger the water progress bar like the example in Figure 2.
- Users can also dismiss the modal by clicking on `Close` in the modal footer or the dismiss button in the modal header.
:::