Imaginary Friends Forum Project

In this project, I created a single page app, and the majority of user interaction is handled with JavaScript. I decided to make an app where people could anonymously post their imaginary friends; I'm of a generation where talking about an imaginary friend meant you got bullied & laughed at. I would've loved an app like this during my adolescence.

This involved using Rails as a back-end API, which wasn't too difficult; adding "--api" to the end of the "rails new" command did most of the work. It didn't involve complex SQL table relations, and rendered JSON data instead of an html file. Then I used JavaScript to pull that JSON data & render it on the page, and this involved numerous challenges.

The first of which was utilizing object orientation. For the sake of being succinct, I used class constructor workflow that was introduced in ES6. This project involved working with a series of objects from the back-end, so I created an empty object in JavaScript to hold this collection of objects from the Ruby back-end. While fetching the master list of friends from the back-end, I assigned the key of the JavaScript object equal to the index of the Ruby object, and set a new class instance as its value. This allowed me to iterate through the values of this JavaScript object when I rendered the friend's information to the page.

I decided to use an event listener for when the page was done loading to fetch & render the friends' information. This also allowed me to reload when adding an imaginary friend and have it show on the page without any additional effort from the user. Like everything else, I'm sure the way that I implemented this particular feature is less elegant than other options, but it works.

Implementing the like button feature was particularly difficult. I initially setup the event listener inside the block when I iterated through the friends object to render them on screen. This worked just fine when I only had one like button, but quickly failed with multiple like buttons. It would find the 1st button, then find the 1st & 2nd, then the 1st, 2nd, and 3rd, etc. So clicking on the third button would register an event on the 1st, 2nd, and 3rd button, and increase the likes for all three.

My first attempt at resolving this was setting-up an asynchronous function that waited until all rendering completed, grabbed all like buttons, and added an event listener to each one. This resulted in the same behavior that I described above. I eventually put the event listener just after the iteration block closed, but still within the rendering function, and this resolved it, so it only recognized one button click at a time. I also had to add an id to the button that's equal to the friend's id, so I could communicate which friend we're updating to the back-end. After resolving my like button issues, I was able to follow the same pattern when adding a new comment.

At this point, the functionality of the app was complete, but visually confusing. There was no differentiation between the imaginary friends & which friend the comments belong to. While rendering, I setup each friend in its own div, which really helped when playing with the CSS. I decided to go with inline-block, which separated each friend very nicely, and has the side-effect of automatically adjusting based on the size of the view-port. I'm sure that there are more elegant designs out there, but I think it's always better to go simpler.

Working through this project really helped build my understanding in how JavaScript executes, and the likes button challenge really illustrates that where you put code has an exponential effect on other processes. I understand that's not isolated to just JavaScript, that holds true for any programming language, but that became really apparent to me after working in JavaScript.

Leave a Reply