I first had to brainstorm what I needed to do, and in realistic and not so complicated way due to my skill level and comprehension of the coding language itself. I wrote a list down and look at the criteria of how I should do it. The project wanted us to build something that had at least 3 event listeners and that it follow the MVP and stretch goals. So, I dig deeper and wanted to do a horoscope generator, but after a few long hours I didn’t think I could do it with the time frame I had left. Because part of it too requires us to use some sort of JSON or API to fetch the information.
The final week I just went with something simple and look at the list Github had provided with its public API. I got inspired by some themes like the random cat and random dog generator. I actually wanted to do one but with pandas, and I found the API site online; https://some-random-api.ml/.
So, for example in my <div> (this is where I define the buttons and the result of the image) </div>and made sure each one had the right id and class set. And I thought to have a stylesheet to do all the styling in. I needed to make the boarders by taking the class and setting what I wanted to make for it. In this case it was making the boarders and some imagery choices. I looked up the mozilla description of the css different types to help me code that part. Once that part was done we go to the coding portion of it.
What I learn along the way is whatever you are doing you must define your function and the objects you are trying to bring out. So I had to define the buttons and its results using const “the object” then using document.getElementById. Once all that is done I passed it through a function using a “click” event. By using the object name dot addEventListeners(‘click’, (name of the function could passed through as arrow => function as well) but I made it separate. This is where next I wrote the function to fetch the API I was using (the random panda and panda pictures). I had to reference this because I forgot how and you need to do a .then and convert it into a JSON file and then taking that data and specifying what you are fetching, for my case the JSON file data string was called “link” so I pull the img src as data.link using innerHtml too.
Once that was achieve it felt great the buttons work! I had to figure out how to do the last one. I just made it simple and just did a change of background color, by the same process of everything except having to fetch anything and rather coding it to be random using Math.floor and Math.random. And of course applying it. The problem I had was in the beginning I was frustrated because it wouldn’t work and I gave myself very little time to prepare, what I learned most is make sure to pace correctly, use lots of help/resources, and make sure the code spelling right. I miss one spelling on something that takes 1 second to make could end up being hours to fix. It be like that sometimes, but I would say after completing this, I was inspire by other people’s creation and my ability to do it and does increased some of my confidence. Overall, I felt accomplished in finishing it.