Need Help With Favorites

#1

Hello all,
So I am new to Javascript and working with APIs as well. I was given a code challenge where I have to display 8 random images from TheCatAPI in a grid format, and then have a ‘favorite’ button that when clicked will save the specific image for later. This is just a demo so to speak so a lot of functionality needed for other projects isn’t required here.

I have the images able to be displayed but I am having trouble getting the favorites to work. Was wondering if anyone could point me in the right direction. I feel like I’m getting closer to the answer but I keep getting a bunch of different errors and now I am just lost and confused again. I can’t post images so I am going to paste my code as best as possible. So far what I am trying to do is POST the selected image to the favorites and also add that image to an array and save the array on local storage to use it later.

I am posting the function I am using to try and save the favorite images. Keep in mind that I have no data saved on my actual computer or files, all data is coming just from the api on the web. I also have the ID of the favorite button set to be the same as the ID of the image that favorite button is currently assigned to.

JavaScript Function

`function addFavPhoto() {
   main.onclick = function (event) {
       event.preventDefault();

       const element = event.target;

      if (element.nodeName === 'BUTTON') {
        console.log("Image Added to Favorites!")
       //Grab ID from specific photo
       let data = JSON.stringify({
        "image_id": element.id,
      });
      
      let xhr = new XMLHttpRequest();
      
      xhr.addEventListener("readystatechange", function () {
        if (this.readyState === this.DONE) {
          console.log(this.responseText);
        }
      });
      
      xhr.open("POST", "https://api.thecatapi.com/v1/favourites");
      xhr.setRequestHeader("content-type", "application/json");
      xhr.setRequestHeader("x-api-key", "906f9f50-3b14-4630-a89a-a0421d1e5317");
      
      xhr.send(data);
  
     //Add specific photo to array above
     favoriteImages.push(data);
  } 
  localStorage.setItem('favoriteImages', JSON.stringify(favoriteImages));

}
};
`

#2

I would recommend generating a new API key-- API keys are like passwords, and by posting it here, it is now public knowledge. Anyone can use and abuse it, and will likely get your key blacklisted (meaning your project could stop working at any time).

You say you’re getting errors with this code. Can you be more specific? I can definitely help if I know what’s going wrong. Unfortunately some of the code also depends on how your page is constructed, so seeing the exact error (or errors) that you’re working on would definitely help track down the problem.

1 Like