Project #4 : Vanilla JS Frontend with RoR API backend

Intro

My fourth project for Flatiron School was building a Single Page Application(SPA) using Javascript as a frontend and Rails API as a backend.

Project Description

As always, for this time again, my 3 years old son gave me another idea what my project would be. It might be a little bit childish;however, I named my project "Dinosaur Flash Card" which will show the dinosaurs as cards and using CSS, flipping those cards to show the user to have brief details of the selected dinosaurs.

Backend Setup

I added two model since "MesozoicEra" and "Dinosaur" with a relationship of has_many and belongs_to relatively.
After migration and seeding data, by using rails scaffold for both models, backend was easily set up without having trouble.

Frontend challenges

There were many difficulties and challenges when I worked on this project. Altering codes from Index.js file to each model folder's file in order to make my code DRY was the basic challenge;however, the most important part was understanding what JS code looked like since I am totally new in this city.
For this project, 'fetching' and using 'addEventListner' method were the most useful method I had to use for several times.

Fetching

I used 5 fetching method; render all dions, render all eras, render dinos by era, POST(creating a dino), DELETE dino.
For this post, I would like to introduce how I fetched all dinosaurs and made them displayed on the webpage.

class API {
    static ALL_DINOSAURS_URL = "http://localhost:3000/dinosaurs"

   static addDinosaurs() {
        fetch(this.ALL_DINOSAURS_URL)
        .then(response => response.json())
        .then(dinosaurs => {
              dinosaurs.forEach(dinosaur => {
              const newDinosaur = new Dinosaur(dinosaur)
              newDinosaur.renderDinosaur(dinosaur)     
              Dinosaur.all.push(newDinosaur)
              })
        }) 
    }
}

Above code is the way how I fetched all dinosaurs as a class.
In services folder, I've created API.js file and added API class to make my code as DRY as I could. Since this is just fetching process, I needed to add the below codes to actually display all dinosaurs on the web page.

document.addEventListener("DOMContentLoaded", function() {
  API.addDinosaurs() };

I called 'addDinosaurs' function and invoked it to Index.js file with "DOMContentLaded" event listener so that it finally rendered and displayed all dinosaurs from the backend to the front.

Summary

Throughout this basic fetching process, I felt much comfortable playing with Javascript. As a beginner of JS, all methods and functions do not look familiar just like when I learned RUBY as a first computer language. By practicing this simple fetching method and repeating those process to fetch other backend data, I finally ended up having better confidence than the beginning of this project.