Working with the Fetch API - Displaying the Content

Question

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;
}

Answer 1 · 2019-01-21T23:18:20Z

January 21, 2019 11:18pm

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));

Welcome to the Treehouse Community

Looking to learn something new?

Alex Franklin

Alex Franklin

Working with the Fetch API - Displaying the Content

1 Answer

Steven Parker

Steven Parker

Alex Franklin

Alex Franklin

Steven Parker

Steven Parker