It's Alive?
Tags: javascript, beginners, programming, webdev
Published: 2023-09-06 14:40:04

> "Nothing is so painful to the human mind as a great and sudden change." - Marry Shelley's _Frankenstein_

I was so intimidated by the approaching end of my first phase of studies as a web developer that, rather than face it, I did the entire phase again. Upon second approach, I felt no less shaky. 

I hope that the idea of designing a Single Page Application will seem, in not too long a time, a laughably-simple task, but I struggled getting started on this project. Things would inevitably start to make sense, but the primary task of working with a public API proved a bit confusing to me. In my courses at the Flatiron School, we practiced working with local APIs, so interacting with existing APIs immediately sent me out of my comfort zone.

In all honesty, I had no real vision for this SPA and planned to base it on the API I was best able to work with. For some reason, I could not seem to understand the existing code within the API; particularly, I struggled to find API endpoints, which seemed to be a somewhat easy task in my classwork. It took some practice using the fetch method in the developer's tools console to start understanding the data I was receiving in json format. I remembered how to build the functions to retrieve that data, but I was forgetting to actually look at the data I received. 

Once I found an API I felt I could understand and work with, I started working with the data without much of a plan. Perhaps my Frankenstein metaphor falls apart her, considering the good doctor had a plan; I was still experimenting. I knew I would need to return a collection of at least 5 objects (each with at least 3 attributes) and build at least 3 different types of event listeners. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80533uyx4a4r1l5joud5.png)

The API in question includes a list of quotes. Once I was able to successfully fetch the data, I then had to decide what to do with it.

Our assignment challenges us to include at least 3 unique event listeners, so I thought the smartest tactic would be to include a click event, a mouseover event, and a submit event. 

I started with my click event, which I wanted to include 'like' and 'dislike' buttons and a counter. This proved much more difficult that I expected; while creating and appending the buttons was easy, I had to do some extra research on storing and recalling counter information. Even now, it's difficult to retrace the steps of that rabbit hole, but I have ended up with a working counter, which includes having to store and recall the key-value pair - a running tally of likes/dislike on local storage. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y50eqh97e672j6jb6jgq.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6daavbgmspe7eklm7nwa.png)

It is also within the creation of the 'p' element in which the quote text and buttons (and later the form) is created. Also, I've added classes of 'liked' and 'disliked' so that in the CSS, the background color will changed based on whether the user likes or dislikes the quote. 

> "Nothing contributes so much to tranquillize the mind as a steady purpose- a point on which the soul can focus its intellectual eye." - Marry Shelley's _Frankenstein_

This was really complex for me as a beginner, and I had to rely on Google a lot to help me build this. However, this code has led me to some realizations as well. For example, when updating the like count, I made sure to watch the reaction in dev tools to see, in real time, the DOM being manipulated (or, as I'll discuss later, watching 'p' elements appended with comments). Seeing not only the code working properly but the direct impact it makes on the DOM really helps strengthen those mental connections. 

I also want to point the page errors I can't seem to fix. For example, I've been unable to create line breaks between my quote element, author element, and tag element. I've made some attempts, but they don't seem to change the layout on the page. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rmaydxjt58n7zicmt49.png)

Relatively speaking, the other event listeners were much easier to incorporate, though not without their issues. My next step was to add the ability to leave a comment and delete that comment. I was pleasantly surprised by how much easier this seemed to be than the counter, but it also presented errors I wasn't prepared for and were not able to fix.

For example, when leaving a comment on a quote, the comment does not attach to that quote specifically but rather its place on the page. As you can see below, I'm adding a comment to the quote, which works as it should: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12foyv94d1ilz4crpz66.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l751soik9zt98he901x.png)

But once the page reloads, the quote changes but the comment remains: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmql6wx4fmdg4ur4qitu.png)

At this point, I realize that the comment is attached to the quoteElement ID, which assigns the first random quote to 0, the second to 1, etc. instead of assigning the quote to a particular comment. Maybe this is an issue with the Fisher-Yates Shuffle algorithm that Google led me to, but I'm not sure.

These are the little things that I feel like I should know already, but I also think they come with experience. There are also issues I didn't expect, such as the submission field not clearing once the comment is submitted, which I was able to fix through some Googling. 

My mouseOver and mouseOut events were fairly straightforward. I just wanted the background color to change on mouseOver and change back on mouseOut. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmea66uk8jp34c15dgzp.png)

> "There is something at work in my soul, which I do not understand." - Marry Shelley's _Frankenstein_

So, here it stands. My creation, pieced together from my curriculum, Google, and maybe some luck? My page does not work quite like I want it to; perhaps I can fix this before submitting. Nevertheless, I'm proud of what I've created. Am I nervous about explaining it and even defending it. Of course! But, now that my monster is alive (for the most part), I hope it serves as a milestone in my journey to a greater understanding.