While I was among the haters, I’m slowly coming around to JS. Also it runs the web soooo I really need to get on board.
My Ruby project, which I created with hui wang, is a social events app. In it, users can add/delete events that they are attending. They can also follow/unfollow other users as well as have followers. To add and delete events from a user’s page, there were multiple steps involved.
In my EventsApp (working title: “Let’s Have Fun Together” and can be shortened to “Let’s” for the hip people. I imagine users telling their friends that they found the event on “Let’s”. “Hey, how’d you hear about this?” “Let’s!”) a user can add and remove events from “their events”. You can see in the screenshot the “Remove” button under each event. On pages that have events you are not attending, you would see “Add to my events”.
To make this happen, here’s what we had to do:
- Create add/remove events actions in the controller
- Add routes for the controller actions
- Create class methods that define what will happen in controller actions
- Update views to include buttons that access above actions
This was a lot of work and left much room for error.
In the screenshot here, I copied the lines of code that were specific to our add/remove events. As you can see, it took 37 lines of code in two controllers, one class and almost every view. That isn’t very DRY.
In this project, I was creating a Task Manager app with Roman Mullady where a user could create To Do lists with various tasks. The user could also delete their entire To Do List or specific items on the list. This project is still in progress so apologies for the lack of formatting. It’s “early internet chic” which is totally in right now. Seriously.
But I digress. For this project, to add/delete lists we had to:
- Create constants for the elements we were selecting (not really a ‘required’ step)
- Add event listeners to the buttons
- Create functions that fire when buttons are clicked
Let’s break it down.
Also by using event listeners, I can change a lot more about my current code without having to go through all the different routes required by my Ruby project. In all honestly, I had to do a bit of hunting through my code to find everything related to my add and delete event actions (and it’s entirely possible there’s some more code, like my routes, that I didn’t include in my example). That’s not good.
More reading about Event Listeners: