# 5003 Final - Intro to project "Distanppear"
**Group 21**
**Group Member:** Jacky Wu, Qiang Fan, Tiansong Wang, Xinyue Zhou(Kiera)

**The Link to our Project:**
https://codepen.io/qf2153/collab/ZERgWdV

## Problem identification
A long distance relationship is defined as a relationship in which both partners do not live in the same area due to study, life and work, etc. As a special kind of relationship, the mode and psychological mechanism behind a long-distance relationship are different from those of a normal relationship. Because it is more difficult and tougher, there are more challenges and problems. In general, most long-distance couples face the following problems.
1. Lack of face-to-face time with each other. Especially if there is jet lag, it can negatively affect the frequency and quality of daily communication between the couple.
2. Limited physical contact and the lack of non-verbal signals bring people a sense of anxiety and insecurity towards the relationship. In addition, the lack of information about each other's life status may lead to mutual drifting apart.
3. Couples over a long distance may possibly feel difficult to find a topic together to explore, so as to maintain freshness in the relationship.

## Summary of our application experience
Our application *Distanppear* is a web designed for long distance couples who may not have the time to spend with each other face to face.
The web includes three parts of functions.

1. The first part is a small test. By simulating a conversation between you and your partner, it examines whether you really know how your partner thinks and what he or she really needs. When you choose the correct answer, your partner will be happier. On the contrary, when you choose the wrong choice, your partner will become more frustrated.
2. The second part is called mood tracker. You can click on different emoticons to record your mood. Our app will automatically generate charts to record and demonstrate how often you are in different moods.
3. The third part is a Wish List to record your and your partner's plans for the future. You can choose who will do it, when it will be done, and what exactly the plan is.
4. Also, there is a music function. Play the music toggle and enjoy the love song from Ed Sheeran as you are exploring this website.

All in all, Distanppear focuses on keeping you and your partner up to date with each other's lives while creating topics for you to talk about to keep the relationship fresh. If you are in a long distance relationship, if you and your partner are having a hard time because you can't see each other for a while, please don't hesitate to use Distanppear. This can teach you the value of patience and remind you that relationships don't thrive or grow from moments of instant gratification. Even if you are far apart, you can still embrace each other warmly.

## Reflection

### Small Test
In the Small Test part, the right and wrong choices appear in a fixed pattern. If you are careful enough or take the test several times, you can figure out what the pattern is. Therefore, although it presents well for new users, it can still be improved.

### Mood Tracker
(Kiera) In the Mood tracker part, the mission is to record the current mood type that user has and calculate the total amonunt of different mood types and include the data in both a table and a pie chart. The most challenging part here is to use `chart.js` to help generate the pie chart, and it is for the first time that we use the online JS library `chart.js`. It is fun but also quite difficult. When it comes to manipulating `chart.js` to draw the pie chart, here is my thinking process:
(1)Create a `<canvas>` to draw the chart (2)Link the `<canva>` and also the `button` that created above which are monitored during the whole function with JS part using `addEventListener`. (3)draw the chart everytime a `button` is clicked, which requires me to use a function `updateChart()` to update the `chart`. (4)Create a `clear` button to clear all the collected data to prepare for a new round.
I think among the above processes, it is the (3) process that challenges me the most, as there is a tricky part here in useing `new Chart()`: Since the chart would be updated each time a `button` is clicked, so that we must "get rid of" the old chart and "draw" a new chart, which makes `chartStatus.destroy()` matters here in the `updateChart()` function.
The illustration of manipulating with the `chartStatus`:

let chartStatus = Chart.getChart("myChart"); // <canvas> id
    if (chartStatus != undefined) {
        chartStatus.destroy();

It takes me a lot of time to get to this step, which I think is an important lesson to keep in mind in order to preparing for future practice.
To make progress in the future when I have time, I would like to add more data sets and create more complexed data charts even using mixed Chart types. I would collect more data such as user's comments. When I have more knowledge of datebase, maybe I can create a database for our user to store their mood data and maybe able to export the weekly, monthly or even annual report from our website.

### Wishlist
In the wishlist part, in order to add the "finishing time - When", we use a simple method to count the data in the list instead of creating an array.

### Class conflicts between different group members
It's common that when we combine our work together, we encounter the conflicts that when both of the two group members used the same class, the CSS style or JS functions may not work well. Therefore, considering the work as a whole is crucial.