Woof-Woof Lab

Hello Flatiron Cohort members,

Come take a stroll into my psyche and see how I deal with labs. The lab I will be working on today is... phase-1-woof-woof-js-practice! I know you’re all excited about it. For anyone outside of the cohort that is reading this... first, you should stop and find something better to do... but if you insist on continuing you should know that this is one of a series of labs that involve communicating with an API (technically a JSON in this instance) to grab some data, render it to the page and then manipulate it in some way. I’ve already done several of these labs so I’m sure I’ll breeze through this one and make no mistakes because that’s how my coding experience has gone so far.

Oh wait, it never goes like that? OK, buckle up everybody.

Step 1: I’m supposed to familiarize myself with the JSON data. Nice. It’ll be tough to screw this up: ten dogs with names, images and a true false boolean statement about whether they’re good dogs or not. Nailed it.

Step 2: Use a fetch to get the data from the JSON and use the #dog-bar div to attach the dogs’ names with a span. OK, first fetch and get the info…

function fetchPups(URL){
fetch(URL)
.then(resp => resp.json())
.then(pups => {
console.log(pups)
})
}

That worked! Got all the dog info and logged it into the console. So now I have to do something with the data...

.then(pups => renderPups(pups))

function renderPups(pups){
pups.forEach(displayPupNames)
}

And for my displayPupNames function...I'm going to grab the dog-bar with pupDiv, create a span with pupName, get the names in there with textcontent and then append the names to the div as follows:

function displayPupNames(pup){
const pupDiv = document.getElementById('dog-bar')
const pupName = document.createElement('span')
pupName.textContent = pup.Name
pupDiv.append(pupName)

And it didn't work!!! No names. Why is this not working?! All of this looks right. Let me put in a console.log(pup) and see if it's getting the data.

It's getting the data. What the hell?! It has to be something little. AHA!!! I had pup.Name instead of pup.name. Last time I made a mistake like this I couldn't figure out what was going wrong for 30 minutes and eventually had to take my dogs on a long walk to keep my sanity. But this time I found it in under two minutes suckers! The moral of the story: If you keep making the same mistakes, it eventual becomes easier to find them.

Onto Step 3: So now I need to set it up so that if you click on a dog's name, the rest of the details about the dog appear in the middle of the page. So I'm going to want an event listener and another function.

pupName.addEventListener('click', (e) => {
showPupDetails(pup)

function showPupDetails(pup) {
const pupInfo = document.getElementById('dog-info');
const pupNameInDetails = document.createElement('h2');
const pupImage = document.createElement('img');
const pupIsGoodButton = document.createElement('button');
pupNameInDetails.textContent = pup.name;
pupImage.src = pup.image;
pupImage.alt = pup.name

pupInfo.append(pupImage, pupNameInDetails, pupIsGoodButton)
}

OK. This looks good. I have a click for each name, then I grab the div where I want it all to go, create some elements, put in the info I need and append it... so what'd I screw up this time?

Don't worry, ladies and gentlemen. I did screw up screw up something.

So when I click on a dog name, all of the info for that dog: name, image and good/bad dog button all appear in the middle as I'd hoped. However, when I click on a different dog name all of that info appears underneath the first name. And then that keeps happening on down the page. Crap.

Is this e.preventDefault()?

No. I checked. It is not. That's for submit.

I don't know if I've seen this error before... so time to google.

Guys, I'm going skip over all of the googling because it was pretty damn boring but the answer was pupInfo.textContent = "". Basically, I have to clear out the old info before I put any new info in. And it had to go somewhere before I append the details. Isn't this blog amazing?!!

One last thing for Step 3. I have to get some text inside my button so I need an if-else statement to check the boolean info...

if (pup.isGoodDog === true) {
pupIsGoodButton.textContent = "Good Dog!";
}
else {pupIsGoodButton.textContent = "Bad Dog!";
}

Yes!! That sucker worked on the first try. Now, onto-

Step 4: When a user clicks on the button it should change from good dog/bad dog. Sounds like I'll need another event listener and another if-else... and I'll need some way to check whether the dog status is good or bad.

I think I'm going to create a global variable called pupStatus and I will assign values in my previous if-else. So-

if (pup.isGoodDog === true) {
pupStatus = "good";
else pupStatus = "bad";

And then I'll do the event listener-

pupIsGoodButton.addEventListener('click', (e) =>

just another click so that's pretty straightforward. And now my new if-else statement will play with my pupStatus variable.

if (pupStatus === "good") {
    pupIsGoodButton.textContent = "Bad Dog!";
    pupStatus = "bad";
}
else {
    pupIsGoodButton.textContent = "Good Dog!";
    pupStatus = "good";
}

})

So I'm changing both the text and the pup status so that you can hammer that button till your heart's content and it'll change from good to bad and back again in am almost hypnotic way.

This all makes sense... doesn't it?

You're damn right it does! Worked perfectly. Is there probably an easier way to do that? I'm sure. And will my future self look back at this and laugh at my simpleness. I doubt it. I don't see future me being that much of a dick... but hopefully, he's a better coder.

Thanks for reading everybody!