JavaScript Displaying the Content

Alex Franklin
Alex Franklin
12,382 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
206,336 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,382 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
206,336 Points

Glad I could help, and happy coding!