Over the past several weeks, I have been learning JavaScript. Learning how to multi-task better. Learning how to adjust to a new life. Sometimes this is rewarding. Sometimes this is frustrating. Sometimes all you need to get through it is a good dog. Dogs are amazing creatures -- they love a human more than they love themselves, irregardless of if we deserve it. I had a dog growing up, and now have 2 nephew-dogs, with the hope of getting one of my own in the not so distant future. For now, however, an app based on dogs will have to do!
As stated, I created an app about dogs. It shows a breed name, what the breed is bred for and its temperament. Alongside these descriptors is a photo of the dog. The individual using the app is able to “like” or “dislike” the dog. Thanks to The Dog API, and its easy get functionality (detailed below) the photos and information are random. This allows the users to, maybe, see a dog breed that they havent heard of before, and learn something new.
Below is the get request for this API - I learned while creating this app that not all API’s are created the same. Not all free API’s are created the same. Definitely not all free API’s have the same GET request to access the information.
function getDogs(){ console.log("dogs function") var xAPIKey = 'fe4eff12-acfa-4723-8956-d003f09be2e1' var url = 'https://api.thedogapi.com/v1/images/search' return fetch (url,{ method: 'GET', headers: { "Authorization": xAPIKey, 'Content-Type': 'application/json' } }) .then(res => res.json()) .then(images => { console.log('images: ', images) images.forEach(dog => renderOneDog(dog)) }) .catch(error => console.log("error: ", error)) }
Another thing I learned, which I actually had a fair amount of trouble with, was the card itself, and pulling information from the API. Turns out, I had an error I didnt recognize...however it showed me just how much your HTML and JS can rely upon each other....and how much the names for things have to be the same on both your JS and HTML. oops. Below is an example of where I had screwed up (though it is correct here....had to make it work somehow)
<body> <header id="menu"> <h1>Dog Liker</h1> </header> <div class="container"> <div id="animals"> <form id='animal-form'> <label for="name">Name</label> <input type="text" id="name" name="name" /> <label for="bred_for">Bred For</label> <input type="text" id="bred_for" name="bred_for" /> <label for="temperament">Temperament</label> <input type="text" id="temperament" name="temperament" /> <button class="btn" id="like">Like</button> <button class="btn" id="dislike">Dislike</button> </form>
function renderOneDog(dog){ console.log('dogs: ', dog) if (!dog && !dog.breeds) return null console.log('below conditional') document.getElementById("name").value = dog.breeds[0].name document.getElementById('bred_for').value = dog.breeds[0].bred_for document.getElementById("temperament").value = dog.breeds[0].temperament let card = document.createElement('div') let img = document.createElement('img') img.src = dog.url card.appendChild(img) card.className = 'card'
As you can see - there are several places in these two blocks of code where things could go wrong -- all because a name was changed somewhere. Crazy if you ask me.
Several mistakes on my part were made, lots of learning achieved and one great big feeling of relief, once I finally got things working, all to create an app about mans best friend.
