Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Displaying the Content

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
210,128 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));

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
210,128 Points

Glad I could help, and happy coding!