# MSTU 5003 Final Project

---
Group members: Yan Wang, Peiying Chen, Nuo Xu

---

**Codepen link: https://codepen.io/yw3884/pen/NWzVbxw**

## Problem
> Nowadays, there are amount of people who always have trouble making a decision on "What to eat today".
## Solution
> Our web application is aimed to help our audiences(people from all ages) to decide what to eat today.
> On our website, you will be able to:
> * PICK YOUR MEAL by filling a question form
> * VIEW FOOD GALLERY based on(or not) your results
> * DISCOVER ingredients, restaurants, and fun facts about the cuision we generated for you.

## Spefications
1. Think about your application as a collage of components.
* Components users interact with?
>:::The flow of using this website:::
> 1. Users view the whole gallery of food pics to find thier inspirations
> 2. Users select their preferences by finishing a questionare
> 3. Users gain their results
> 4. Users can view related informaition such as recipes, restaurants and fun facts of their results.
> 5. Users can provide feedback and upload the dishes they want to add in to our websites.
>
> ---For the phases described above---
* >Users can click the navigation bar on the top of the page, by clicking different button, users can be navigated to the specified part of the page.
* >Users can complete the questionare by clicking the checkbox, radio button, range and select box.
* >Users can click the arrow above the images to browse the food gallery we made.
* > Users can submit a feedback form to help us improve;
* > Users can click on the "shop" button to go to another website to shop for their ingredinents;
* > Users can click on the "recipe" button to view detailed recipe;
* > Users can click on the "restaurant" button to see representive restaurant for that cuision in their area;
* > Users can add the food they want but didn't see to our food gallery in the feedback area.

* Components that react to user interaction?
* >We will ask users to type their name in and generate a unique result for each user. For example: Congratulations, XXX(userName)! Here is what you gonna eat for today...
* >We will ask users to type in their zipcode to find a representive restaurant in their area for the cuision we genrated for them.
* > By clicking on the "shop", "recipe", and "restaurant" buttons, users will be able to jump to another website to see details.
* > Our food gallery will update as users uploading more food they wanted but didn't see here.
* > The text color of "calories:xxx" will change based on users' choice. Example: green for low calories..
* >By clicking the "Done!" button to finish the questionare, the food gallery could filter the recommended meals for user.
* > Backgroud pictures will change depends on user's answer to the question "2. Which country would you like to have a meal from?"" For example, if the user choose contry CHINA, we will change the background picture to the Greatwall.

2. Think about the behaviors of your components and document how their BEHAVIORS/ACTIONS would unfold (if this was a working JS prototype.)
:::success
E.g. Pushing this button will cause this DIV to change colors.
E.g. Entering a value into this text field will change the content of this heading to X.
E.g. When the mouse gesture is made, the computer would detect it clears the screen, replacing it with new HTML that tells the user X message as feedback.
E.g. When the city information is entered into the form, it will be sent to Google and we will get back the LAT and LON coordinates. THEN the computer will place a pin on the map.
Your imagination here is the limit.
:::
* > When the user clicks the button called "GET STARTED!", the color of the words will turn to black from the original light color.
* > When the user clicks either arrows on the two sides in the food gallery column, the color of the arrow will turn to white from transparent.
* >Also, there are many other buttons in our website pages, which when the user clicks them, they will change their colors or turn to a darker color from a lighter color.
* > When the zipcode information is entered in the result area, it will be sent to Google map and we will get back the LAT and LON coordinates. And we will sent this data to YELP which will generate the best restaurant for them which align with their results.
* > By clicking on the submit button in the feedback area, users will see a Thank You message as "Thanks for your feedback, we've helped xx(num, bold different color) people decide what to eat today". We will generate this number in javasript by the i++ and list functions. as
* >`var helpedUsers = 0; function onClick(i) {i+=1; return i;} onClick (helpedUsers)`
3. Describe step by step what the user does, then how the computer reacts for the most interesting aspects of your idea with specificity.
> **Step 1**:The user will see our introduce part to grap the basic ideas about the purpose of using our website.
>
> **Step 2**: The user will clicking the arrows both at the left and the right side of the image in the food gallery part to narrow down their interested meals based on their food culture background.This part will support them to finish the following questionnaire part.
>
> **Step 3**: We will ask users to complete the question form. When the user finish each question and click "Done!" button, the food gallery can filter the list of all meal items that meet the user's requirement. For example, for the first question, if user choose lunch and not choose the options in other qustions, the food gallery can show all the meals that can be viewed as lunch. For flavors, we use the checkbox, so that user can choose multiple kinds of flavors. For the eating style and other questions of this type, we use radio button, stipulating that user can only select one option, thus achieving the purpose of filtering.
>
> **Step 4**: We will ask users to enter their name and zipcode and then display a unique result for each user based on the question form they submitted. The result area will contain 1) the name, calories, and a short summary of the food; 2) ingredients they need to buy if they want to cook, otherwise, this area will display the nutrition form; 3) Some fun facts about this food. They can also click on the "shop", "recipe", and "restaurant" buttons to jump to another website to see details.
>
> **Step 5**: We will ask users to complet a feedback form for us to make improments. They can also add the food they wanted but didn't see here.

4. Articulation Challenge (Extra) specificity is rewarded:
:::info
Try to use DOM specific language like: parent, children, class, id, css, properties, values, etc.
Clicking on the button element will change the class of the parent list item, applying the green color style to it for positive user feedback.
Try to use DATA specific language like: boolean, number, string, array, object
When the user enters their username (string), we will change the heading element textContent property to a new string > "Welcome " and the username.
When they choose a number using the number input, that number will be used to calculate the red, blue, green values of the background property of the paragraph element object, style by computing … etc.
This is a challenge and you won't be penalized for getting things "wrong" here. But we're interested in seeing how you're thinking about the things we've been exploring so far.
:::

> Extra specificity we used are:
* > When the user enters their name (string), we will change the result element textContent property to a new string > "Congratulation " + the name + "Here is your result".
* > The text color of "calories:xxx" will change based on users' choice. Example: green for low calorie and red for high calories.
* > When hovering the mouse on the navigation bar and buttons, the color of them will change in order to let users discover how the page response to their actions.

5. Please use clean HackMD Markup to organize your documentation.
> checked

6. Please include a little bit of reflection on the process you went through - what did you learn, what was challenging, how do you think you need to improve, what are the next steps forward for you and your learning! etc.
> We came out with this idea as a group while we were struggling with what to eat after our first group meeting ^.^.
>
> We've learned a lot during the process of this web application. Most importantly, we found a way to combine everything we've learned so far to build a beautiful and effective website.
>
> Some challenges we faced were that:
> 1. How to make an interactive and beautiful gallery and how to styling the gallery without effecting other parts.
> 2. When we tried to change the text-color for a specific group, all text colors changed. We fixed that problem by assigning unique ID/class to different text groups;
> 3. When we tried to put logo in the center-top area, the "align-center" didn't work beacuse the logo start to show up in the center but since it has length itself, it appears more right-handed. We dealt with it by adding left position and margin left minus px.
> 4. When dealing with the web banner img, it at first kept running out of the col,and it was not responsive when screen sizes change. We dealt with it by adding class"img-fluid".
> 5. For the range in question form, first we tried to set one to five as the range using "span". But when we set up the layout with "span", we found that we could not distribute the five numbers evenly in one line. So we changed to use "col", divided the row into five parts and finally dealt with that problem.
>
> Things we think that we can improve are that:
> 1) Probably we can narrow down the scope of our potential audience. For example, only provide service for New Yokers or just TC students/staff. So that the we can avoid linking too much data(like restaurants)to our web!
> 2) We can improve the layout and the timing those section appear to users by adding JS elements. Now we are only able to show all sections in one page at once, which may fail to provide good user experience because users have to handle too much information at once.
>
> Next, we really look forward to add JS elements to our project!
>
> Dear MSTU 5003 Team,
> Thank you for providing us such an interesting and highly open-ended project to do! We really enjoy doing it!
>
> Last but no least, thanks all, great job!