diff --git a/lib/script.js b/lib/script.js index e69de29..bfda590 100644 --- a/lib/script.js +++ b/lib/script.js @@ -0,0 +1,42 @@ +//Initialize variables for HTML +const url = "https://api.thecatapi.com/v1/images/search"; +const btnRand = document.querySelector('.randomButton'); +const divCat = document.querySelector('.categoryCat') + +//fetch() will return after the other instances have completed +const yarnBall = (e) => { + // Prevents web page from reloading. + e.preventDefault(); + + fetch(url) + //pulls the inforamtion, parameter is a function + .then(res => { + //returns to the next .then statement + return res.json(); + }) + .then((data) => { + //runs displayCat function with data from api + displayCat(data) + console.log(data) + }) + //error handling + .catch(err => console.log('Something went wrong', err)); +} + +//Function for displaying cat pic +function displayCat(catPic) { + //declare HTML elements in a string within a variable + const catPicHTML = ` + Cat Pic + `; + //removes existing cat picture + while (divCat.childNodes.length > 0) { + divCat.removeChild(divCat.firstChild) + } + //inserts HTML block above with the HTML elements and information + divCat.insertAdjacentHTML("beforeend", catPicHTML); +} + + +//Get image upon click for random cat image +btnRand.addEventListener('click', yarnBall)