# MSTU5003 Final Project
### Group 8: Zhiyin Wang, Qinya Xu, Peijin Shen
<span class="link">:link: [Final Project Page(CodePenLink)](https://codepen.io/ps3299/collab/NWzVRPG?editors=1010) :link:</span>

---

# Summary of Application Experience & How it Addresses Our Defined Problem
We brainstormed several ideas such as Pet Dating App, Tarot Card Reading and Calorie Calculator. Finally, we decided to work on Pet Dating App. The outline of this application has been shown in the figma link. Please feel free to take a look:)

<span class="link">:link: [Figma: Idea for Pet Dating App](https://www.figma.com/file/dcCqJG2amFimHgii6FM7OP/5003---Final-Project?node-id=0%3A1&t=7hapOlzKbrMhjGRE-0) :link:</span>
>Note: You may also be able to see the outline of the Adoption App appearing in the figma link. To be honest, the Pet Dating App was created and developed based on the Adoption App. We just realized maybe making a Pet Dating App would be more fun.

There are four major parts in our Pet Dating web application: **Header, Filter, Gallery and Sharing**.

**Filter:** This part will help users narrow their search range. Users can select `Both`, `Female`, `Male` by clicking the dropdown menu. If users need to reset their search results, they can click `Both`. Then, the gallery will be refreshed and changed back to the original page.

>We realize this function by using `filter` function to construct lists of female pets, male pets, and both genders. We construct the `initialization(input)` function in a away that requires a input being an array so we can print out the objects that we want. The`innerHTML` of the gallery is replaced every time the filter applies by calling the `initialization` function.

**Gallery:** After the users choose the search range and decide which gender need to be shown on the Pet Gallery, they can view the pet profiles by clicking on the `Know More!` button. Relevant information, such as age, gender, breed, and owner's email will be appeared in the modal. At the bottom of this gallery, users can add their own pet profile by clicking the `Add Your Pet` button. A form will appear and ask the users to fill out the information about their pet. Name, breed, and email are three required info to fill out for other users to contact the owners.If the users don't fill in the required part in the form, there will be popped up an alert automatically. After users finish creating the profiles, by clicking `Submit` button, they can update their own pet profile in Pet Gallery.
>We initialize the gallry items and the detailed information modals using a `for` loop that extracts corresponding information in an array of items.

> The "Add your pet" button gets the input values of the form and add them as the properties of a new object. When the user press the "submit" button, the new pet is pushed into the `pets` array.

> The add pet form requires 5 information: name, gender, breed, email, and Spayed or Neutered? However, even though we added `required` at the end of the `input`, the inputs are still not required. We looked up online and it said that the computer is listening to a `onclick`event instead of `onsubmit` when we put it in the modal (https://stackoverflow.com/questions/52526176/form-inputs-in-modal-not-showing-as-required). We did not know how to solve it. So we decided to use an`if`statement to check whether the input value is an empty string. If any of the 5 inputs is empty(gender and spayed or neutered are already checked at the default value), it will send an alert.

**Sharing:** By clicking the icons, users can share this web application to their soical media with their families and friends.

# Reflection For This Term
### Zhiyin Wang
:::info
I feel so proud of being able to make an interactive website & application after the semester. I think HTML is easy, but CSS is hard (I tried to avoid using CSS by adding boostraps). I really enjoy the JS part because it puses me to conceive many different ways to achieve my goals and many situations that should be taken into account. I learn how HTML, CSS, and JS can interact to form a complete experience, such as using `class` to add styles with CSS, and manipulating HTML with JS. In addition, I really enjoy the Doodle assignments because I can try new things each time. It pushes me to learn things beyond what are taught in class. However, I found myself easily forget things taught in FCC, so I need to refer back to the code when I need it.

This project specifically -- I feel myself more adept in manipulating the `innerHTML` with JS that in the last project. I think it is a quick way to add repeated information to HTML which helps me avoid many tedious work and make the code more concise. I am glad that I learned how to use a filter in this project (whcih is very useful), but in our original idea, we wanted to allow multiple filters, which I have no idea of how to apply and I wish to figure it out in the future! In addition, I tinkered around various types of form inputs (e.g., radio buttons, text, dropdown menu, etc.) and learned how to get the value of the input. It's interesting to see that different types of input required different types of retrieval methods (and some are more complicated than others).
:::

### Qinya Xu
:::info
As a beginner who have no idea how to code, I think I learned a lot from taking this course. When I start learning HTML, I think I could still catch up. However, when we first start learning css and javascript. I found that even though I could understand when listening to the lecture, it was still difficult for me to write code when I practiced myself. But then I realize it is important to explore and find all kinds of useful resources on the internet, such as the official website of bootstrap and w3schools. There are lots of helpful websites that provides tutorials for us to learn and utilize in our own projects. For example, one Doodle assignment that me and my groups have done, the Web Toy, we found a tutorial about how to make a countdown clock. With help and support from TA session, we successfully build our own Matching Song Game with a countdown clock. Even though this project took a lot of time and energy, we all feel very excited when completing this project. I think another important thing is that I learned about computational thinking: decomposition, pattern recognition, abstraction and algorithms. I'm glad that I could take this class this semester. It is a great experience for me!
:::

### Peijin Shen
:::info
By taking this course, I learned a lot in terms of interpreting and writing HTML, CSS, and Javascript. I can't believe I've started to able to understand and write the three "secret languages", especially, as a novice who has 0 coding experience before taking this course. Maybe I can not be an engineer even after taking this course, there still be such a long long distance between my current location to become a skilled programmer. However, to be honest, I found learning to code so interesting, I more than would like to take it as my lifelong learning goal to enjoy coding to achieve what I want to achieve step by step without rushes.

My one of the take-aways from this course is each one has their own learning pace, don't compare ourselves with others' learning outcomes and paces. It's okay to finish the FCCs, the Tinkers, and the projects slowly. But the important thing is understand them fully (It's hard and would take a lot of time).

Another take-away is try it out and practice it, which is so important for novices to learn how to code. Don't be afraid of making mistakes. Maybe I will keep learning how to code in the winter break. Pain and pleasure go hand in hand:)
:::