This blog post is about my ‘Expenses Tracker’ app, which I built in my second to last module at Flatiron School. I was particularly excited to start this one because it was my first time really practicing frontend development. I was able to compound on my knowledge of Rails from the previous module by building a Rails backend serving as an API.
I was required to build a working Rails and JavaScript application which needed an HTML, CSS and JavaScript frontend, with a Rails Api serving up the backend. All the interactions between the backend and frontend needed to be handled asynchronously(AJAX calls). The JavaScript section of the frontend needed to use Object Oriented JavaScript classes to encapsulate related data and behaviour. The models in the Rails backend needed to include at least one ‘has_many’ relationship; in this case my ‘Account’ model ‘has_many’ ‘Transactions.’ The backend/frontend had to demonstrate ‘Client-Server Communication’ by having at least 3 AJAX calls which covered at least two of CRUD(Create, Read, Update, Delete). My application covers CRD by allowing the user to create a transaction, see it on the DOM(and persisting it to the database/backend) and then delete each instance of a transaction from both. In the JavaScript frontend I had to use ‘fetch’ requests correctly with the appropriate HTTP verb, whilst the backend had to follow RESTful conventions.
The part of my project id like to focus on and do more of a deep dive into is my ‘deleteTransaction’ function. This was a particularly tricky function to get working properly. It was tricky because not only did my function have to delete the specific instance of a transaction from the backend and frontend(DOM) but it also had to update the overall balance in both those places too.
The backend ‘destroy’ function was fairly straightforward seeing as I had just completed my Rails project, I knew I needed a Ruby function called ‘destroy’ which found the correct transaction by it’s ID and then deleted that instance of a transaction from my backend/database. It had to update the overall balance too, which it does by calling on the class method I implemented in my ‘account.rb’ model called ‘undo_balance.’ For the delete request to work with my frontend I then had to add the last line/AJAX call ‘render json: transaction.’
Then came deleting the transaction from the DOM when the user clicks on the ‘delete’ button. To start I had to create the API request from the frontend to the backend which I aptly named ‘deleteTransaction.’ This function is the go between my back and frontend. When the delete button has been clicked this tells the backend to call the ‘destroy’ function and remove that specific instance of a ‘transaction’ which has been passed in dynamically with the use of interpolation.
The Object Oriented JavaScript delete function was more complicated than the API call or backend function. I started by declaring a new instance of an API, then I targeted the specific instance of a delete request, I passed in the ‘event’ meaning I could use the built in JavaScript function ‘.target’ to hone in on the specific element I wanted to delete. This didn’t quite select what I needed to select and delete; but chaining on ‘.parentNode’ found it, all that was left to do was call ‘.remove( )’ on it so that it was removed from the DOM. The line of code below then called the API and told it to remove it from the backend through my ‘deleteTransaction’ method shown earlier. To make sure the correct transaction was being deleted I passed in ‘(this.id)’ to the API call.
Now that all instances of transaction delete requests were being deleted when the user clicked on the ‘delete’ button, I had to move on to making sure that the overall balance was updated and rendered for the user to see. To do this I used the built in JavaScript method ‘document.QuerySelector’ and passed in an argument instructing the method where to look exactly when updating the balance. I opted to implement an ‘if…else’ statement containing logic that would update the balance depending on which type of transaction had been deleted. If the user deleted a ‘deposit’ then the amount needed to be subtracted from the balance and the opposite for a ‘withdraw.’ The last line of code is what updates the balance in the DOM so the user has been able to keep track of their expenses.
