JavaScript and Me
There’s been a lot going on in my life and JavaScript became a nice (though challenging) diversion. Our project tasked us with creating a single page application. We needed a backend API that was built on Rails, while JavaScript powered our frontend. There also needed to be has-many relationship (in this case I chose to have my game categories have many games) and then AJAX calls between frontend and backend.
The core of the app is a video game library that lets you add your favorite games. The neat part of this project is that JavaScript and Rails are flexible enough that improvements can always be made without fundamentally changing much code.
Backend
Rails was the backbone on backend and the generator with API command helped me get everything setup quickly.
Controllers
Controllers were setup in JSON because of our Client/Server interactions. Controllers here are much more basic than Rails because it’s a Single Page Application. Some basic CRUD actions were implemented through the controllers, like index, create and destroy or index and show. I chose to render in JSON because I didn’t have many models. For bigger apps, this setup likely wouldn’t work, but it served it’s job here.
Models
There are two models here for Games and Categories. Games belong_to Category and Category has_many games. Straightforward here.
DB
SQLite chosen here. I was going to try PostgreSQL, but I had some trouble in getting it setup so I deferred to the simpler choice. There is also some seed data to help get any users started and I’m going to add some more to “flesh” things out more.
Frontend
Complicated, very complicated for me. Still a lot of learning to be done, but I will do my best to describe what’s going on here.
Index.HTML
Things were kept fairly simple in here and only added what was needed to get things going. The big reminder here is to make sure any JavaScript Files that you have are connected at the bottom.
API
Following convention is key to making sure your API Service functions as needed. The challenge is any time data is going to be processed or modified is that you have to specify the correct fetch request. New = Post Update = Patch. In my fetch request, we get a response from the API. The data is parsed into a JSON format in .then. Once that’s done, you can use your data. This JSON formatted data is utilized in the index.js file where manipulation of DOM occurs.
Index.js
Everything is dependent on DOM here. The file waits until DOMContentLoaded is triggered so that all of the JavaScript executes properly. An event listener prevents anything from going when the index.js is loaded. This event is where JavaScript classes are instantiated.
Category Dropdown
My JavaScript classes are part of the HTML elements. The category dropdown here is not the same thing as the category model. It will have some of the model attributes, but it’s really a dropdown menu borrowing these attributes. A static method here is categoryCollection. It’s a method that can be called directly on the class. The constructor ends up as something that contains a bit of information about your object. That info is assigned to “This”. The “this” refers to the object that it’s inside.
Game Card
Built-in JavaScript methods help render most of what’s going on. No HTML blocks are passed into the functions.
Game Form
Unlike the above, the entire HTML block is in the function. In this section, the most critical part is getting the category id correct.
Styling
Minimal CSS was written by me as I’m still getting a handle on it, but the CSS is below.
Conclusion
This is definitely the most challenging project so far. I’ve enjoyed finding a project that is much more visually appealing and flexible, but it’s made me appreciate what’s going on “underneath” the hood. There’s still a lot to learn and a lot to improve!
