## Codepen URL

https://codepen.io/jj3361/collab/abPQXvm

## Introduction:
Welcome to our web application, exclusively tailored for the vibrant student community of Columbia University! 🦁

Our platform is here to help you create meaningful connections and perhaps even kindle some lasting relationships while you navigate your college journey. 🌟What can you expect from our platform? Well, we've incorporated some nifty features like personalized filtering, allowing you to fine-tune your search for the ideal match. Looking for someone your age, or maybe someone who shares your major or MBTI preferences? We've got the tools to help you discover like-minded individuals. 🤖✨

But here's where the magic happens: our data-driven algorithms. We've harnessed the power of data to assist you in finding compatible partners. Plus, we've introduced the 'matching degree' system, grounded in data analysis, to give you a clear sense of compatibility before you take that first step. No more guessing games—just informed connections. ❤️

Remember, everyone is unique, it's not about finding the 'perfect' match, but rather about the joy of getting to know extraordinary people during your college adventure. 📚 Ready to start forging those meaningful connections? Let's get started!"

## Problem:

Many students at Columbia University have dating needs as it is human instinct to seek for love and emotional support. However, the unequal distribution of the number between men and women in different colleges bothers students to find a romantic relationship. For example, girls at TC may have difficulies in seeking for relationships.

## Solution:

Our dating app: Inter.Date delivers a distinct experience by providing users a wide range of preference filters such as age, major and mbti etc. Students can efficient discover their compatible dating candidates with the support of our data-driven algorithms. Therefore, our users have more opportunities to meet different individuals that not only share compatibility but also pique their interest.

Our subsequent idea was to not only showcase why the selected individual is an excellent match but also highlight the differences between them and the user's "ideal type." Additionally, we offer supplementary information. To provide users with a comprehensive understanding of their compatibility, we calculate an overall matching score, empowering users to decide whether they want to take the next step in connecting with their potential matches.

## Behavior-constellation:

**Navbar**


This is the Navbar of the website. Users can achieve interactive functionality by clicking on elements inside`.navbar`. When users click on the bell icon button, a message list interface will appear on the page. When users click on the profile icon button, the page will navigate to the user's profile.

**Filter Section**


In this section, our application allows users to filter and browse displayed profiles based on specific criteria.The filtering criteria include options such as gender (`#genderSelect`), age (`#ageSelect`), major(`#majorSelect`), personality (`#personalitySelect`), and more. When users click on the arrow icon buttons on either side of the filtering criteria, they can see additional filtering criteria and attributes.

When users select filtering options and then click the confirmation button, the system will send the user-selected parameters to the backend using a JavaScript function. The backend will search for filtered user profile data based on these parameters. Subsequently, through DOM interaction, it will locate `#card` and modify `li` elements and the src attribute data in `img` to update the image, displaying the corresponding profile card. This process involves dynamic generation or modification of elements to represent the retrieved data without the need to reload the entire page. All data used in this process are string.

**Profile Card**


This section is visually presented in the form of cards to display user profile information.

**Matching Score**


In this section, our application offers a "matching score" generated through our data-driven algorithms. During the user registration process, we collect their birthdate details, enabling us to determine their zodiac sign. In the specific example provided, John's birthdate is July 23rd, 1993, classifying him as a Leo. Given that this section is designed for female users, the user in question is identified as a Libra.

When she accesses this section, a simple click on the zodiac symbol allows her to access more information about her respective constellation. Furthermore, clicking on these symbols triggers visual changes, causing this division (div) to alter its colors and adjust the class of the parent list item. This change results in the application applying a yellow color style to provide positive user feedback.

**Matching Buttons:**


In this section, users can see their overall matching percentage based on the matching scores above. If users are interested in talking to the individual, they can click the "Match" button and a chatting box will pop up. If users are not interested in matching the recommended person, they can click the "Cancel" button and our algorithm will recommend a new dating candidate.

## Reflection:

I often contemplate whether, as a programmer with the ability to overcome technical barriers, I can bring any app idea to life. This contemplation naturally leads me to question the type of app I would choose to create. When our group initially embarked on the brainstorming process for this project, we encountered our first challenge: our creativity seemed somewhat stifled by the preexistence of apps developed by others. It was challenging to break free from conventional thinking and design an app that truly catered to both my needs and those of my peers.

Our next challenge was how to visualize our ideas on Codepen since we had too little knowledge about web designing. Our vision included a sign-up page that required a Columbia student UNI to ensure that only Columbia students could access the app. We aimed to go beyond just age and major, but we recognized that our initial criteria were still somewhat limiting. We aspired to incorporate an animated heart when users clicked "match," but this functionality necessitated the use of JavaScript.

Despite encountering challenges along the way, we maintain a deep conviction in our ability to create an app tailored for Columbia students. In the future, our aim is to enhance the app by offering better design and more comprehensive information. We aspire to fully convey the capabilities of our algorithm to users, ensuring that the algorithms are not restricted by web design limitations. To enhance the app's interactivity, we believe that incorporating JavaScript into our future designs is the next step that we should take.