# 5003 Section 04 Final Project:
## Designing a Mental Health Support Webpage for TC Students
## Midterm Codepen URL: https://codepen.io/kh3111/pen/GRMrPVp?editors=1100
## Final Codepen URL: https://codepen.io/kh3111/collab/QWMWJqa

## Team Members:

* Kelly Huang (kh3111)
* Chris Lapp (cl3431)
* Dorothy Licorish
* Titus Chen (tjc2125)

### **Problem to Solve:**

:::info
Recent research literature concludes that the long-lasting social and political effects of battling COVID-19 have negatively impacted higher education students. Researchers "...highlight the urgent need to develop interventions and preventive strategies to address the mental health of college students." (Son et al., 2020)

Our solution was to develop additional webpages (hypothetically) attached to the [**Teacher's College Health & Wellness site**](https://www.tc.columbia.edu/studentwellness/) and specifically dedicated to mental health support. As a web application we created an ***experience*** comprised of:
1. **Breathing Circle Visualizer** consisting of several CSS animations and key frames
2. **To-Do list interface** that gets, sets, and acts upon user inputs (conditional for-loops)
3. **Buttons to an audio playlist** which includes dynamic feedback of elapsed audio time
4. **Links to relevant Resources on other pages**
5. **A Chat Box** for users to seek help when needed

Our final project reflects a comprehensive improvement upon our [**mid-term submission**](https://hackmd.io/sjzJKo6KTdOYStN2_CuDqg) that incorporates JavaScript interactivity we learned about in the second half of the semester. You can best understand our learning in terms of the midterm submission (before learning JS) and final submission (after) states that we'll reflect upon below:
:::

### Reflections on Learning Web Interaction:
#### Overall Layout:

> **MIDTERM:** We separated our **Helpers** and **Resources** sections with a `hr` and used `a name` and `a href` for simple in-page jumping because we did not understand how to navigate to different pages (or at least create the appearance of doing so) based on interactivity.

:::success
**FINAL:** With the application of various Event Listeners, Triggers and Handlers, we were able to apply the functionality that was lacking. For example,
- Use of a `window.onload` function and `.hidden` conditions in JavaScript bring users to just the Breathing Circle Visualizer. The other pages are *deliberately hidden* at first.
- In this manner we encourage users to take a brief pause from their hectic realities and pay attention to their breath with a soothing animation and can click to move on when ready.
- Instead of coding all the`onclick` Event Listeners in HTML, we experimented with coding that in conjunction with the `.hidden` property in the JavaScript panel.
- With Global Event Handlers and documentation on `window.onload`- [**courtesy of MDN Web Docs**](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload)- we objectified the different pages (e.g. `homePage` element -> `homePageEl`)
- We applied functions to change the `.hidden` properties of these different objects based on additional Events after `window.onload`
- Other `onclick` Event Triggers are found in HTML that determine how to hide/show other pages, leaving the user an impression that they are jumping to a different page.
:::

#### To-Do List:
> **MIDTERM:** We developed the containers for this Component with the help of Bootstrap styling but at this point in time our To-Do list was static and therefore cosmetic.

:::success
**FINAL:** Our To-Do list now represents our understanding of `if/else` conditions, for loops using traditional `(var i = 0; i < data.length; i++)` notation, several data manipulation methods and the syntax used to locate elements for the Document Object Model. Users can also type in, complete, and delete a task. We added functional buttons for add task, delete completed task, and complete all task.The CSS of the completed task will change once the user clicks on the checkbox as well.

* In reference to Jin's lecture and FCCs we applied the `.push()` and `.filter()` methods to add/remove objects into/from arrays. We also referenced how to create unique IDs with `date.now()`
* But we also practiced our own iterations of nesting loops under functions (e.g. CodePen lines 95-99)
* We had to get creative with the code to change the CSS of the completed items because the unique id of each object is linked to the `input` element. Therefore, we had to learn how to call the sibling of the `input` element to change the CSS.
* We also learned how to set attributes to each element to disable the checkbox and enable the checkmark `onclick`. Without setting the attribute, the checkmark would appear when someone clicks on it, but it would not stay if someone adds another task.
:::

#### Sleep Audio:
> **MIDTERM:** Use of the Collapse Accordion feature in Bootstrap created a static list of possible audio sources.
:::success
**FINAL:**
* We attached a fully-functioning MP3 Player element that contains audiobooks, meditation monologues, and ambient sounds.
* On line 151 in the Javascript panel, a function called createTrackItem uses document.queryselector to display the name of a track listed in the array on line 183.
* The play button uses a boolean on lines 158 to 161 in order to switch from pause to play when clicked.
* In order for certain elements to react to the length of the song, like the progress bar, remaining minutes, or the user clicking on the progress bar, a variable called 'trackDurationitem' had to be made which would track the length of the song using the function getMinutes, and dictate the length of the song for all other functions using 'trackDurationitem'
* An array was used on lines 181 to 277 to list the songs and thier url sources instead of linking the audio in the HTML, as was done in the midterm.
* The variable currentAudio was referred to whenever a function needed to reference the song being played. For example, the fast forward and rewind buttons on lines 352 - 360 use 'currentAudio.currentTime -/+ 5' to skip forward or back in the song.
* Starting from line 300 in the JavaScript panel, the elapsed time of each audio file was represented through functions `onTimeUpdate()`, `setBarProgress()`, and `getMinutes(t)`
* `onTimeUpdate` was used to cause the music player to play the next track after a certain track was finished.
* `setBarProgress` allowed the progress bar to indicate how much of the audio had been played.
* `getMinutes` was used to display how many minutes had elapsed in the song, and how many minutes were remaining.
* Finally, the mute button uses an if else statement to decide whether or not to let the volume of the song play at 0 or not.
* If I had more time on this project, I would have added a volume slider and a sleep timer for 15, 30, or 60 minutes.
:::

#### Chat-box:
> **MIDTERM:** Simple use of a Booststrap stylesheet as a static button

:::success
**FINAL:** We quickly recognized that even with our learning of JavaScript, storing user inputs in a server using JQuery, etc. was beyond the scope of our coursework. However JS was added to create a simple response generator.
* When we first run the function it checks to make sure that the text input box is not blank. If it is not blank then the rest of the function will execute. With `if/else` statements it is determining the correct response for each answer the user inputs.
* The chat box is designed similarily to a robocall where there is an auto response prompted once the user answers the question. By asking specific questions then the response can be customized to the users.
* Questions are stored in an array which is defined as `var clinicianPrompt`.
* A counter was initially set at 0.
* Each time time the user hits submit, the counter increased so that the next question is pulled from the array.
* Once it has gone through all of the questions and responses, an if statement prevents the user from inputting any more information.
:::
#### Search Bar:
> **MIDTERM:** Search bar was static and had no functionality.
:::success
**FINAL:** For the final, once the user inputs data into the search box and hits submit, it activates an on-click function call searchFunction which concatenates a google url search string to the input value.
* Then the `window.open` function is used to open a new tab for the google search.
* The search results are limited to the nimh.gov website by inclusion of the following string as part of the google url-site%3Ahttps%3A%2F%2Fwww.nimh.nih.gov