The end of May marks the end of Phase Four for my cohort and the beginning of a new project. This time I had to create a single page application using Javascript and Ruby. On my backend which was all in Ruby, I created an API that had information of my two models: orchestras and instruments. I set up their has_many-belongs_to relationship and created some seed data that would show up on the page. Once I finished all my backend code, I began working on the nitty gritty which was the frontend, where all the Javascript had to be written.
The idea of my project was to show the names of the orchestras on the page and give users the option to create a new orchestra or edit the name of an already existing orchestra. I also wanted to give users the option to show the instruments of a particular orchestra. So I began by creating functions that had fetch requests to obtain the API info from my backend to be able to do CRUD functions all on one index file. After doing all that, I realized I had to do OOJ (Object Oriented Javascript), so I created a new file where I'd be able to handle all my fetch requests under one class, which I named OrchestraAdapter.
After creating a file that handled my fetch requests, I created a file that handled my orchestras. I created an Orchestra class with a constructor that had its name and instrument attributes. Within that class I also created methods that would render its instruments and an addToDOM method. Similarly, I made an Instrument class with a constructor containing all of an instruments attributes (name, family, quantity). Creating all these files made my code look less cluttered because of the separation of concerns.
I was having a lot of trouble trying to understand how certain JS methods worked, like innerHTML and innerTEXT, as well as the difference between using a regular function and an arrow function. As I kept working on my project, these methods became clearer and made my understanding on JS much better.
Top comments (0)