5003 Final Project:

# 5003 Final Project: :::info **Group Members:** Dora Zhang, QianWenyi Xing, Viola Qin **Codepen:** https://codepen.io/vq2123/pen/VwBwerM ::: **Problem**: CMLTD students need a social networking site to have a real connection with someone. **Explanation**: In this project, we built a social platform called "StickyKnow" for CMLTD students to find new ways to introduce themselves and connect with people with similar characteristics. The goal of "StickyKnow" is to connect students with other students in the program with similar interests, values, and lifestyle. In this program, with our new knowledge in javascript, we simulated a way to match them with users in our existing database by asking them to answer a few interesting questions. There are four pages in total. While the program share similar visuals and user flow with our midterm project, we made substantial changes to make it a more effective and enjoyable experience. ## Code Rationale and User Flow :::success **1. User profile creation** Displaying user inputs, which was one of the functions we wanted to but hadn't achieved in our midterm project, is the very first interaction users have in our final project. After clicking on the "Make Friends NOW" button, users would be directed to answer three questions, nickname, MBTI, and program of study. These three questions, which are consituted by two types of input, text and select, requires users to type down their preferred name and select relevant options. This is achived by the following three steps: - `validateInput()`: test if users have input anything or not. - `addUserName()`: if user has input or select a certain value, then the function will call the next return function, otherwise it would simply call itself and does nothing. - `returnUserName()`: to display the nickname, what we need to do is to simply declare the innerText as the input value. To display the selection, we need to get the text of the dropdown index user chose. **2. Database creation** After the user sees their profile, they are prompted to a page where they will answer 4 interesting questions. The idea is to match new users with existing users in our database by comparing their MBTI, program, and reponses to 4 questions. * To maximize the number of user possiblities, we created a data array called `userData` in javascript that stores 16 different objects each with 6 properties (MBTI, program, and answers to 4 questions). We decided on 16 because it is the number of combinations that you can get from 4 questions with 2 answers, and is also a reasonable amount of work to create the objects. * When the user fills in their information, a data array called `newUser` will be created to store the 6 properties of the new user, later to be compared with those of existing users. **3. Friend Matching** * After the user has completed the personality questions, they can click a button to connect with one of the existing users. We write two JavaScript functions to implement this friend-matching feature： * `findUserSimilarity(user1, user2) `: This function will take in two objects and return a number representing the similarity between them (0-100). It determines the similarity between two users by comparing their MBTI personality type, the program of study, and the choices they make on the personality test. Since we use an array to store the data for the existing users, we decided to use the `reduce()` method to count the matching properties between two user objects. Then, we divided the number of matches by the total number of properties and multiplied by 100. * `findMostMatched()`: Once the new user clicks the "Find a Friend!" button, the program will automatically recommend the most matched user in the database for the user to make the connection. In a for loop, we execute the `findUserSimilarity(user1, user2)` function to find the percentage of similarity between the new user and all existing users. All percentage of similarity is stored in an array. Then, we use the `Math.max()` method to find the maximum percentage and use the `indexOf()` method to find its index in the array. This index number can be used to access the most matched user in the database. Next, a Boostrap modal box pops up and displays the profile of the recommended friend. The new user can choose to connect with them or skip this step. * `connectMessage()`: We imported a external script called [SweatAlert](https://sweetalert.js.org/) into our website to customize alerts. If the new user click the "Connect" button, a success message will pop up. ::: ## Reflection :::info Compared to the midterm web UI app where responsive interactions were not the focus, we spent a longer time figuring out what's a better user experience, that includes how the user should see one page at a time instead of scrolling down all pages, how the backend of the program should store information so that we can actually match users with "real" people like them, which in this case is a matched user to connect to. As we deeply enjoyed this project as our new exploration, there is still a lot of room for improvement on this website. For example, we can add a feature of confirming whether the new user's nickname is the same as an existing user to avoid creating user objects with the same name. We could also provide a better user experience by reducing the number of required clicks, if we could manage to get all user inputs at a time but not through separate click on the confirm button after each question. We can make each input field required to avoid users skipping questions—something we struggled to resolve but eventually decided to put default values as a nudge to prevent them from skipping questions. Given that our webiste's visuals is not that pixel-perfect, it could also be further improved. We attempted to practice "less is more" in our final project, as you can see that compared to the visuals of our sticky note in midterm project, of which drop-shadow is blurred and oversized, the new sticky note is more clear-cut and more like an element you can see on an authentic website. We also used the layout grid, buttons, dropdowns and modal from bootstrap and sweatalert to improve the visuals. However, in the current version of the website, we only focus on optimizing the visual layout for desktop users. In the future, we can further optimize the visual experience for mobile users as we would learn more about responsive design, so that when users drag the window, the page could adjust its centent to seize different screen sizes. Furthermore, there is technical limitations to implementing our idea of how a powerful algorithm works in a larger application, for 1) user data in this program is fictional, 2) there would be thousands more users in an actual application that needs better management. We would love to explore how the algorithm works in a real setting such as in social media sites. But just from this simple simulation of comparing data, we learned a lot about what javascript can do to both provide meaningful and smart interactions. We were all new to HTML when we first started this course; however, through the assigned FreeCodeCamp exercises and Doddle projects, we have learned how to organize HTML elements in a page, how to use CSS or Boostrap framework to optimize the visual layout, and customize JavaScript functions to improve the page's interactivity. We are extremely looking forward to further learning how to build instructional interactive media in the second part of this course. :::