# PROJECT 001 - Web App UI Link to project [https://codepen.io/zc2535/pen/porygPr](https://) ### PROBLEM Eating is important for people. People get their daily nutrition from food. Lacking nutrition could result in various illnesses. Nevertheless, people do not eat proper though they know it is important. There are several reasons. Some people don't have time to plan their meals, and some people don't know about nutrition. This web app would provide people with customized meal suggestions based on their body condition and daily nutrition needed. ### SOLUTION - Front-end: people give their personal information such as body weight, height, gender, diseases and exercise habit. They also give their personal eating habits such as vegan/vegitarian, skip breakfast, etc. - Back-end: Precoded meal plans with detailed nutritions. Calculate people's BMI. Give meal plan suggestions based on eating habits, body condition, and meal plans in the system. ### COMPONENTS - Components users interat with - Navigation bar: users can click on the nav-items on navigation bar to navigate to each section. - QA input fields: users fill out the QA forms step by step. - Buttons: clicking on `Next` will direct users to the next form. clicking `Submit` button will submit all the information to the system. - Components that react to user interaction. - Navigation bar: when users click on item on nav bar, it directs users to page/section. - QA form: when users fill out the form, the system checks whether the information is validated to throw errors or continues with the next questions. Once all information is acquired by the system, it would automatically give users a customized weekly meal plan. ### BEHAVIORS - When the Next button is pressed, it will hide the current form and show the next form. - When the inputs are enterred, it will check the validity of the input. If the input is not validated, it will show error, if the input is correct, it will go to the next form. - When all the information is aquired, it will be sent to the system antd a meal plan will be generated. ### STEPS (Repeat till all forms are filled out) - Users fill out the form. - Computer validates the input. (When information is acquired) - Computer filters the preentered meals by user input information. - Computer generates a customized meal plan for user.