Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Displaying the Content

Alex Franklin
Alex Franklin
12,401 Points

Working with the Fetch API - Displaying the Content

Getting VERY old wasting hours upon hours wondering what I'm not understanding or what small mistake I'm missing in my code... and then 50% of the time, I end up having a small typo I didn't catch, and the other half of the time, the instruction in the video is SO outdated that the syntax, browser, or something else has changed and it destroys the course, the learning, the experience, the... just forget it.

ANYWAY....

My code is not displaying like in the video - can someone PLEASE help me figure out what it is that I am missing in my code!? PLEASE!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DoggoSelect</title>
  <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans:400,700" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <h1 class="logo">DoggoSelect</h1>
  </header>
  <div class="container">  
    <label for="breeds">Select a Breed</label>
    <select class="u-full-width" id="breeds"></select>

    <div class="card"></div>

    <form>
      <label for="name">Name</label>
      <input class="u-full-width" id="name" type="text">

      <label for="comment">Comment</label>
      <textarea class="u-full-width" id="comment"></textarea>

      <button type="submit" id="submit">Submit</button>
    </form>

    <p>Made with &lt;3 by <a href="https://teamtreehouse.com/">Treehouse</a></p>
  </div>
  <script src="js/app.js"></script>
</body>
</html>

JAVASCRIPT

const select = document.getElementById('breeds');
const card = document.querySelector('.card'); 
const form = document.querySelector('form');

// ------------------------------------------
//  FETCH FUNCTIONS
// ------------------------------------------
fetch('https://dog.ceo/api/breeds/image/random')
  .then(response => response.json())
  .then(data => console.log(data.message))


// ------------------------------------------
//  HELPER FUNCTIONS
// ------------------------------------------

function generateImage(data) {
  const html = `
    <img src='${data}' alt>
    <p>Click to view images of ${select.value}s</p>`;
  card.innerHTML = html;
}

1 Answer

Steven Parker
Steven Parker
229,644 Points

Your one item in "Fetch Functions" seems to be a blend of the two in the video. Try these two instead:

// ------------------------------------------
//  FETCH FUNCTIONS
// ------------------------------------------
fetch('https://dog.ceo/api/breeds/list')
  .then(response => response.json())
  .then(data => console.log(data.message));

fetch('https://dog.ceo/api/breeds/image/random')
  .then(response => response.json())
  .then(data => generateImage(data.message));
Alex Franklin
Alex Franklin
12,401 Points

Thank you, Steve! It can be so easy to get lost in frustration when not able to debug an issue... This fixed my problem and I really appreciate your help!

Steven Parker
Steven Parker
229,644 Points

Glad I could help, and happy coding!