Creating my JavaScript Portfolio Project
For this project, I continued using the theme of skateboarding from my previous two. This time, however, I decided to create a mock web store for collector skateboard decks, to provide a place to purchase those certain decks out there with iconic history and limited stock.
Initially, I created the html of my page with basic elements that my JavaScript would manipulate, like a selector for sorting items or a form for signing in/logging on. Afterwards, I worked on the Rails API portion to handle the backend by creating a model for the cart, user, and skateboard deck. A user would have a cart, which would have many skateboards. Using the rails scaffolding, I was able to quickly create JSON within respective controllers for each model and then use JavaScript to perform a fetch request on that JSON. I also made a quick CSS file that would format the page.
With a rough backend and html file, I started on the JavaScript side of it by initializing variables that would select the html elements to respond to. To test out the JSON being created, I created a seed file for ten decks within Rails, then rendered the decks with a fetch request by creating a div for each deck and applying the appropriate info within- such as the image of the deck or the name. A button was also added to each div which would later be worked on to add each deck to a user’s cart.
Now that the decks were rendering correctly, I focused on the sign up/login portion. I utilized find_or_create_by within Rails to sign up a new user by the name they entered or log them in. A div was then created as well displaying the user’s entered name by another fetch request. Preventdefault was used to ensure that a blank form could not be submitted. I would then create a class that would track who was currently logged in by recording the username and ID of the user who used the form. This was very useful as I could now use this data within functions to create/update the correct user’s cart. The logout button would then clear this info.
While working on the cart, I ran into trouble adding a deck to the correct cart. I tried to access the cart ID in order to tell the update fetch request for adding a deck to the right cart, however, I couldn’t figure out how to access this ID. What I realized though, was that there would always be one cart for one user. This means that the ID of a cart would concur with the ID of a user. Therefore, I could utilize the class maintaining the logged-in user ID in order to appropriately set the deck’s cart foreign key. In retrospect, it could have been possible to create a class for logged-in user’s cart, but as I mentioned I do not believe there would be a case where a user’s ID would differ from the carts.
The decks could be added to the carts, so I then worked on displaying the appropriate deck info once a cart was populated. I made the show path of the carts controller use a cart’s has many relationship by cart.decks as opposed to cart in order to easily acquire the info. Then, I would create a div for each deck within the cart, add a button to remove an item if a user wished, and a checkout button at the end of the cart div. Checking out simply updated all the decks to no longer be associated with a cart like the remove button, except for all of the decks. I also needed to add the total price, which was done by adding up the prices of the decks (acquired via the cart JSON) to a variable and resetting that variable if the cart was closed, when a user logged out, or other cases that would cause an improper calculation. I attempted to get this total via a model method within the cart, but I would receive errors when trying to access the method from the backend in the frontend. Though not following the separation of concerns precisely, it was efficient and would get the job done.
The last feature I implemented was to sort the decks being rendered. I created custom paths within the deck controller to respond to the way in which a user wished to sort them. When one of the options were selected, the main.innerHTML was changed to an empty string in order to clear out the existing deck divs, and then the decks were re-rendered with JSON organized according to the way in which a user wanted.
Using both frontend and backend was a great learning experience, seeing how much control you could have in displaying the Rails API data with Javascript. I learned a lot about appropriately updating user interactable elements as well as making their functionality appropriate for the end goal of an application.
