# Project Web App UI
Our code can be found here: https://codepen.io/zl3252/collab/wvjOyZP

The group members include:
- Ze Lu
- Sally Ng
- Regina Wright
- Sandra Sowah
> The deadline of submission will be on _October 16th, 2022_
>
## Project Write-Up
Problem and Solution

> What is our app solving?
:::info
Here's our response:
Pre-teen and Teenage students need tools to help them build healthy habits, routines, and life skills as well as reflective capacity.

An imbalance of healthy habit impacts not only mental health of the teen, but also the entirety of their well-being.

:::
- Solution:
> What is our app going to do to solve the problem ?
:::info
Here's our response:
Allowing people to maintain their minor everyday details can have a long-term impact on their way of life. Reminding individuals to take care of themselves, including their mood, sleep schedule, and work hours, in order to better notice their changes and pay attention to themselves.

An application that can help people track or monitor becomes useful to track minor and some major details of a person's life. It also allows them the opportunity to change their habits gradually as evidence in psychology ("Atomic Habits" by James Clear).
:::

Reflection: Building the Solution

- Components users interact with and components that react to user interaction:

>What is in our "collage" of components?
:::info
Here's our response:
why do we have these componenets as compared to others?
The components users will interact with are:
- "check-in" BUTTON
- "weight" INPUT box
- "video" MEDIA CARD
- "selection" DROP-DOWN LIST

The components that will be reacting to user interaction are:
- "check-in" BUTTON
- "weight" INPUT box
- "selection" DROP-DOWN LIST

:::
- Behaviors of our components and document how these BEHAVIORS/ACTIONS would unfold if this was a working JS prototype:

>How would the fully functional version of our app operate?
:::info
Here's our response:
1. The web page will load with default variables or values that would hint at the type of input of interaction possible to the user
2. A user will see the option of selecting a drop-down menu list that allows for a selection corresponding to their mood
3. An input for the weight is required as a number. The code provides an error notification if the correct input is not provided
4. The user has th option to watch the video, but it is not a requirement prior to submitting the page
5. Once the submission button ("check-in") is clicked, there are a javascript functions that wouold be enabled to query each input provided to establish that they meet the requierd state for each varaible
6. Based on each state combination allowed possible, the java script would diplay a linked page that shows a chart comparing variables against each other in a trend (mood vs weight, sleep hours vs weight, etc.) and the impact on a person's well-being. Potential source for such charts are world health, fivethirtyeight, etc. The javascript code then provides suggestions and resources that are considered optimal variables for a person's well-being.

NOTE: To eliminate the potential for numerous combinations, we will keep some of the inputs static as we compare the others.

:::
- Step-by-step:
>Describe step by step what the user does, then how the computer reacts for the most interesting aspects of your idea with specificity. [Using DOM and DATA specific language]
:::info
Here's our response: Users will be asked to provide data for the following four items/selections: daily mood, sleep hours, weight, and working time. Then user will click "check in" button to sumbit the information. After entering, the computer will save the data and create long-term graphs and data charts that primarily focus on the individual user (this part is not coded in our project). Users can click on the video and  watch to receive daily tips as well.
:::

- Overall Reflection:
>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?
:::info
Here's our response: We learn many ways to create user-interactive features in Html and CSS. JavaScript makes web pages more dynamic and user-friendly so that they respond to visitors’ actions. Or, to put it another way, JavaScript makes web pages interactive. However, we also find it challenging to apply the since we lack programming language, it is hard to implement the way we want our app to look. We need to improve it by making more mistakes and trying out and testing different codes. Our next step is to get familiar with bootstrap and JS. Bootstrap is a convenient and useful tool for creating a stylish and functional framework for a web project that can customize to our own preferences, and it saves developers a lot of time and stress.

:::