Cat liker blog

** The idea for this project took a long time to come to me. I was googling different APIs for a couple of days, I kept reviewing the project guidelines trying to incorporate everything into one application. After thinking about previous assignments I completed, I finally decided on making an application that is kind of like what youtube has in place when we watch videos. When we watch a video it loads and youtube gives us an option to like or dislike it. So from there, I started looking for APIs that had pictures like movie APIs. Then I found the Cat api and this is how the Cat Liker was born.

Now that I have my API I started working on my HTML and CSS. Trying to make my application look the way I want I ran into a couple of problems. One of the problems was making sure my IMG filled in the IMG tag exactly how I wanted. Another problem was my button wasn’t aligning to the center. After editing my HTML a little bit I had everything how I wanted it to be. Finally it was time for the hard part.

Writing the Javascript took me a while to complete, in my project I had to start off with the getpic function because that function was the core for most of my other functions. One of the things the getpic function does is calls fetch. The fetch requests data from the Cat api and then gets a response from the Cat api. As you can see below:

function getPic(){ // gets pics from api
   fetch('https://api.thecatapi.com/v1/images/search')
       .then(resp => resp.json())
       .then(data => {

When the response gets back the data gets stored in variables
.then(data => {
           let catImgUrl = data[0].url // sets the url to a variable
           picture.innerHTML = "" // clears img
           let img = document.createElement('img') // creates img in html
           img.src = catImgUrl            
           picture.appendChild(img) // makes img a child of #picture

After I had my function working correctly I made another two functions. One is called the like counter the other is called the dislike counter. What they both do is count how many clicks each button gets and displays them back on the screen so the user can see, they also change the picture when either one is clicked. Here is a how the code looks:

function dislikeCounter(){
       dislikeCount++
       dislikepic_btn.innerHTML = `DisLike👎 ${dislikeCount}`
       getPic()
   }

   function likeCounter(){
       likeCount++
       likepic_btn.innerHTML = `Like👍 ${likeCount}`
       getPic()
   }

Next I started writing my next event listener which is a submit. I wanted to get a user's input and put it back on the screen. So I decided to add a comments section under the pictures. I started adding an event listener to my form and immediately started to invoke a function and added the prevent default to stop the submit from taking actions as it normally would. After that I grabbed the user input from the application and created a new html element. After the new element was created I set the inner value of the element to the user input.

commentForm.addEventListener('submit',function(event){ // add user input to screen
 event.preventDefault()
 let catCommennts = event.target.commettext.value
 let commentBox = document.createElement('p')
 commentBox.textContent = catCommennts
 document.getElementById('userinputs').appendChild(commentBox)

The easiest part was creating the download content event listener all i had to do was add the get pic function to keep loading and image as soon as the page loads

document.addEventListener('DOMContentLoaded', () => {
   getPic() // makes img appear when page loads

I really learned a lot trying to complete this project. I learned nice researching skills and knowing exactly what to ask to get the information that I'm looking for. I also gained more experience using the debugger and debugging things in the console. I overall had a great experience working on this project.
**