Final Project Codepen link - https://codepen.io/nn2527/pen/JjyLvBJ

Final Project Documentation

**Introduction** - I wanted to create a platform Columbia students to find friends that they share similar interests with. The idea stems from my personal challenge of not finding friends with similar interests.

**Problem** - When students are new in a school, it is difficult to find friends who they can connect deeply with based on their interests and continue partaking in activities together.

**Solution** - Students will be able to use my platform to find people on campus who have similar interests.

**How** - When a user/CU student lands on my page, they will be faced with a question in `h1`, "Looking for friends with similar interests on Columbia campus?". This will be a moment where they will decide whether this is what they are looking for through this page -- is this something that interests them and makes them stay on the page to read it further. If they are looking for friends (i.e. they have a problem similar to me), they would read, "Find friends in a few easy steps", which is the next line in `h2`. After which I describe the steps to them to actually find a friend. Here, I have used `h3` to define the steps, which are, "First, write down your interests to get added to our database. Then, write the interests you want to share with your future friends in the "Write keywords" box below".
Here onwards, I start using `div` and `input` tags to ask questions to the user. My questions are as follows -
1. Full Name
2. Interest 1
3. Interest 2
4. Interest 3
Followed by a "Submit my details" button, as shown in the below figure -

Pushing "Submut my details" button will call the `SaveData function` that I have created in `JS`. The saveData function's work is to literally save data that the user inputs in the input tags like Full name, Interest 1, Interest 2 and Interest 3 and fetch it when their IDs are called [upon pressing the "Submit my details button"]. After this, I ask the user to put down "keywords" i.e. their interests in the "Write Keywords" input box. Once they do that, they are required to press the "Find Friends" button. The Find Friends button calls the `function findAFriend()` which will loop through all the saved data and find an appropriate match based on the interest of the users who have filled their details.

**Details of my JS** - In my JS, each input's value is saved in a dedicated variable. For example: 'n' is for full name and i1, i2, i3 are for interests. I call all these as "profiles" as that's what the user is doing when they are inputting their name and interests. So, when the user inputs their details, they are saved in the console and can be seen through `console.log(profiles);`

Then since they have pressed "Find Friends", another function gets called using the onclick property in my HTML. The function findAFriend() has a variable `lookingForAFriend` that checks data from the input box where the user has written keywords (i.e. their interets). After this I run the for `loop` with `if` and `else` statements. My `for` loop will check the data input by user to match it until it finds something similar in the interest variables (i1, i2, i3). If it does find similar results (i.e keywords match with interests mentioned) to show it will show "*Friend recommendation - x*" and break otherwise ('`else`') it will say, "*No suggestion found. Try with a different interest.*", i.e. when it does not find similar keywords and interets in the block of code.
A better way to understand what I am saying is by looking at my code in the below figure -


**Conclusion** - I have bigger plans for this but alas, I do not know how to execute them since I don't have backend skills. Otherwise, a fully functioning solution to my problem is the one where a user puts their data and get results from the data saved previously by the users who came before them to look for friends and whenever two people's interests match then connecting them to each other through some automated process. For now, the results (i.e. friends recommendations) are fetched from the temporary data saved in the console. If the user exists my codepen, it is cleared/lost and hence, every time, each person has to start from scrach with no previous information/choice of friends to match interests with.

**Reflection** - It has been extremely challenging yet fulfilling to make this. Of course when I started this class, I never thought I could even reach this stage where my webapp responds/interacts/fetches and shows data but now that I have progressed in my JS programming journey, it not only looks feasible but also empowering to know that engineering a webpage is possible without an engineering degree. This is not wholesome, as I shared in my conclusion above as what I want from my page is a lot more responsiveness, but I am aware that, that is not possible with my current skills. At least, I am beginning to enjoy playing around my ideas to evaluate the possibilities of execution and how much depth (in terms of skill) does an idea require. Even though I can not think through it all, W3 school and Stackoverflow help me, and I am really grateful for their presence/free accessibility. I guess, I have learned half of the stuff from the internet alone in the last 3 months and half of it by actually trying to make something/execute my idea (and making mistakes > Googling up more to troubleshoot my bugs). I am excited for 5013 now, to see what it has in store for me to learn!