Making a Javascript Trip Planner
Tags: codenewbie, womenintech, javascript
Published: 2021-01-07 23:12:51

Of all the projects I've created in my time at Flatiron School, this was the one I was looking forward to the least. Our task was to create a web application with a Javascript frontend and Rails API backend and a minimum of two models with a belongs_to and has_many relationship. 

I felt really confident in my rails knowledge and decided early on that I wanted to have four models in my project. I began to create my Trip Planner rails backend using the following models: Trip, Category, Item, and Trip Category. The last model was necessary to create a joins table between Trip and Category since each one 'has_many' of the other. By day two of my project, I was seriously questioning why in the world I thought creating four models was a good idea. Nevertheless, I pressed on. 

The first thing I wanted to be shown on my web application was a list of all Trips that had been created with their respective Categories listed beneath them. This required a `fetch` call to my Rails API at localhost:3000/trips. I decided to create a service class that would handle all of my fetch calls, making them async functions. My first fetch looked like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7f1vect3lq3d825y6awv.png)

Because this project required us to use Object Orientation, I knew I would need a `Trip class` to be able to handle all of my trip objects and how I might display them to the page. For this first function, to render my trips onto the DOM I built a `renderTrip()` function in my `Trip.js` file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vckrowpqffhmjq65wf22.png)

 To put it all together, I created a function in my `index.js` that would both call the fetch as well as the render functions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rdd0huxok1alj998crrw.png)

That single async function is called when the page first loads with my `bindEventListeners` function. It effectively calls on an instance of my `ApiService class` (which I create at the very top of the page --not pictures) and uses the `fetchTrips()` instance method to retrieve all of my trip-related data. Once I have the data, I iterate through each trip object, creating a new instance of my `Trip Class` and then using my `renderTrip` method to display each of them on the page. 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jv5oxm0nzdn3juww9g1p.png)

My project was starting to look like a real web application! Once I understood how to use my `Api Service class` effectively, retrieving the data I needed wasn't too much of a challenge. The most challenging piece of this project for me was manipulating the DOM in a way that allowed me to store all of the necessary object ids in places where I could access them to eventually create a new object. For example: to create a new instance of my `Item class`, each Item needed to know both the trip instance(`trip_id`) and category instance(`category_id`) it belongs to. To do this, I had to sneakily insert that information into the document and the form within which the item instance is created. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ttw9u988zaa9lxmsle01.png)

In my createNewItem() function, I needed the `trip_id` and `category_id` information to create my `configObj` which would be sent to my backend in order to create a new instance of an `Item`. I was able to pull the `trip_id` from a `<div>` element that I had created on the page with the id of that particular trip. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2tbyp9oso52szkxtmybq.png)

And I had access to the item's `category_id` from a form dataset that I inserted into the item's form when the form was created: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z9h6sjef63br6b21xltn.png)

To create the item instance itself, I just had to pull it all together: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ik9ktooeypo2ar2f4o97.png)

Once I got the hang of storing necessary information, I was able to successfully work through the project adding Create and Delete functions to each of my Models. 

Though I was actively dreading this project at the beginning, I think working through it made me a much better debugger. I feel so much more confident handling javascript code and knowing how to sift through and move through a function step-by-step to figure out which piece of the puzzle is broken. I feel really grateful for deciding to do a somewhat complicated project because it really forced me to be acutely aware of where exactly I was in my code at all times and knowing how to search for the information I needed to get everything working.