# Project 1 Web UI - Group 14

For this project our initial idea comes from a quick brainstorming session during group discussion in class.

> What problems are there that we are all interested in solving?

After a round of blasting sticky notes on the Zoom whiteboard, one topic caught our eye:

> How can I quickly get a recipe so I don't have to spend a lot of time searching and figuring out what to cook?

## Problem and Proposed Solution

`"I have some groceries in my firdge but what dish do I want to cook?"`

Breaking down to a more sepcific user description, we are solving the problem for:
1. People with existing ingredients and cookware but need a quick inspiration for a recipe.
2. Sub-problem: people who need to search for a recipe real quick.

The solution we are presenting aiming to solve the afroementioned two problems:

:::info
An app/website that can generate recipes based on your existing ingredients, simply select and get recommendation for your meal!
:::

## Presenting: [MagicRecipe!](https://codepen.io/Stella-Guan/pen/JjwwRNP?editors=1100)

We organized the codes into two parts: the navigation bar and the recipe generation section. The over color scheme for the website is: `#df321b` and `#fffdf4`. The font used for the website is: <font family="Comfortaa">Comfortaa</font>. All applied in the CSS sheet. We also applied bootstrap styles in the HTML code to format the UI.

### Part One: Navigation bar
Th overall UI approach focuses on simplicity, and two main features of the app will be displayed at first sight. As users enter the interface of MagicRecipe, they can choose either to generate a recipe by selection preferred cooking ingredients, cooking time, seasoing, and cookware, or go directly into the recipe search. The navigation bar is consisted of three components: the brand name `MagicRecipe`, the `About` button, and the `Login/Register` button. Hoovering over and activating these bottons will cause the **DIV .navbar and .btn** to add a underlie border with the <font color="#df321b">theme color</font>.

> A demonstration of the navbar when hoover over the `About` button:

Users can learn more about us by clicking the button `About`. When clicked on the button, the `list tag "nav-item"` will but activated through `"nav-link"` to the section labelled with an `<div id="about">`, which is located at the bottom of the page.

> :bulb: Ideally, we would like to make a separate `About` page instead of placing at the buttom.

The second/the last button on the navigation bar is the `Login/Register` button where users can either log in to their existing account, or register for a new account in the corresponding fieldsets of the forms. We used bootstrap's [Toggle between modals](https://getbootstrap.com/docs/5.3/components/modal/#toggle-between-modals) template which will create a pop up page when clicked on the button.

1. The first modal is the Login page where users can type their username and password. By clicking on the button `Don't have an account?` users will be directed to the second modal.
2. The second modal is the registration page, which requires typing in email, creating a username and a password. Users can also return to the Login modal by clicking on the `Back to login` button.

> :bulb: Ideally, the `Login` <button type="submit"> will lead the user to an account page where they can find their saved recipes and user profile. The `Register` <button type="submit"> will hence result in sending a confirmation email and then lead them to the account page once they confirmed registration.

### Part Two: Recipe Generation Section
In the **main** section, there are 3 major divs: **p2**, **selector**, and **result**. **P2** is to solve problem 2, which provides a quick search of recipes for people who already know what they want to cook. **Selector** and **result** work together to solve problem 1, which means generating recipes for people who have some ingredients, but don't know what they can cook.

Entering a name or keyword in the search bar of **p2** will search for the details of the corresponding recipe.

In **selector**, there are 4 categories to help users filter the appropriate recipes: Ingredients, Seasoning, Cuisine, and Timing. Each category corresponds to a rounded box below. Clicking on the text of the category will jump to the corresponding box. The first 2 boxes are composed of Floating Input and Checkbox Toggle Buttons, which allow users to type down or click on the ingredients and seasonings they already have. The Checkbox Toggle Buttons are designed to make the interface more readable and to prompt the user for options. The last 2 boxes use **select** menus, which allow users to select cuisine and timing according to their preferences and needs. Each box has a Close Button. If users want to ignore one of the categories, they can close the box by clicking on the buttons.

> A demonstration of the box when users choose to select ingredients by clicking the `Checkbox Toggle Buttons`:

**Result** displays the recipes filtered by **selector**. After users tap the “start cooking” button, it will automatically generate the matching results for them to choose from. It will provide the name and overview of the dishes that match users’ preferences. Users can go back and forth to view the options by clicking the left and right icons. Users can check the details of the recipe by clicking the listed dishes.

## Reflections
#### Kexin Chen:
Throughout the project, I think analyzing the problem is the most important thing to do before starting coding. Especially when we work in a group, it’s hard to decide what we want to do when everyone has such diverse ideas. After we decided we wanted to make a recipe tool for users, I went right into brainstorming by looking at similar websites and apps. And that is very overwhelming since there are too many ways to approach it. Then we decided to pay attention to what we value the most based on our own experiences. This helps a lot to target the audience. Another thing I appreciate about this project is to write down what users might interact with our website. This is very helpful for me to find out what is not good enough about the interface. I realized there are more things I can add after I finish coding. So, I go back to the code part and add more features.

#### Anny Zhang:
During the process of this project, I utilized various different components of Bootstrap, such as Floating Input and Checkbox Toggle Buttons, and got a deeper grasp of it. Also, to make the pop-up window, I used Bootstrap's JavaScript modal plugin and got an initial understanding of JS. For example, in the **result** section, Kexin has given some sample recipe results, which I have modified a bit by putting the results into the Modal. This makes the page look more concise and aesthetically pleasing. Unfortunately, there's one problem I still can't solve now. If I want to realize the effect that clicking the Close Button will hide the box in **selector**, I need to learn further about JS. I deeply feel the great power of JS, and I hope to explore more about its functions.

#### Jiaqi Li:
Through the process of this project, I have learned that the visual part is very important for the audience and the reader who is looking at the website. I have learned we need to design the visual part as much as possible to approach the main purpose of our goal. Since our project is based on a cooking recipe for people who need to search for food very quickly. We have designed the recipe website simple, clear and appetitive for users to easily find what they want. The challenging part is we just learned the basic knowledge of HTML and CSS, so the website cannot skip to the exact format as we planned or thinked. But we has used of what we learn to formatting the page and makes it looks like what we want. Another challenge part is to adjust the website page to the correct size that fitting to different users.

#### Stella Guan:

I enjoyed working on this project as it gave me an opportunity to play around with different tags and elements in HTML and CSS while utilizing Bootstrap's various templates and functions. One of the major challenges I encountered was when programming the Login/Register section. I was thrilled to see and apply Bootstrap's Toggler modal template, which definitely saved a lot of time. I could never have coded the buttons on my own. However, as I exported the codes to CodePen, I had trouble formatting the buttons in CSS. The preset button colors and sizes were not ideal for our outlined design, but sometimes, CSS styles didn't apply. For example, the original Bootstrap template had all the buttons formatted with a blue outline border, and the background color would turn blue when hovered over and activated. I was not able to change the colors using the selectors based on the HTML classes `(btn, btn-primary)`. I eventually created new `id` for the elements to make any changes in CSS. I also asked ChatGPT how to change the colors, and it provided a solution of adding !important to the end of the property value, which worked for changing the navbar background color (it was originally grey coming from Bootstrap).

> Here's a snapshot of the first draft of our nav bar (commented out the login button because I really wanted to give up):

Additionally, I think the debugging process has been stressful but enlightening. As I was trying to add the `Login/Register` button to the navbar, I couldn't get it to align properly with the `Account` button. I tried to add alignment in CSS, but it did not work. Eventually, I realized that the </ul> tag was in the wrong place, so the `Login/Register` button was not in that list.

I also enjoyed the process of team brainstorming and collaboration. While it is challenging to collaborate on coding, we eventually decided to divide up the work based on content (HTML) and styling (CSS). However, given the fact that Bootstrap is mostly HTML-based, I eventually needed to communicate with my teammates to change their codes in HTML.

---
## [Link to the CodePen project](https://https://codepen.io/Stella-Guan/pen/JjwwRNP?editors=1100)
It's also linked in the second section heading: Presenting: MagicRecipe!