Twitch App (Javascript feedback)

I’d like some feedback on my JS, this is the first time I’ve tried using async/await and when I set up the first request in my fetchUrl function I was amazed but I feel like I made it a little messy in the fetchStreamers function later on and I ran into a lot of difficulty gettting the final call for the game data.

Anyway here she is.

amazing! great job!!!

I made your displayStreamers function a little more DRY and knocked off 9 lines of repeated code.

function displayStreamers(arr) {
  const streamers = document.querySelector('.streamers');
  const markup = arr.map(entry => {
    let status = '';
    let streamerOutput = entry.stream
      ? (status = ' online', `<div class="streamer__game">
        <h3 class="streamer__game--title">- ${entry.game.name}</h3>
        <img class="streamer__game--pic" src="${entry.game.box_art_url.replace('{width}','40').replace('{height}','40')}" />
      </div>`)
      : '';
    return `
      <div class="streamer">
        <img class="streamer__pic" src="${entry.user.profile_image_url}"/>
        <div class="streamer__details">
          <h2 class="streamer__name">${entry.user.display_name}</h2>
          <div class="led ${status}"></div>
          <p class="streamer__desc">${entry.user.description}</p>
        </div>
      </div>`;
  });
  streamers.innerHTML = markup.join('');
  addOnClickLinks();
}

Thanks Sarah!

I like what you did here Randell, I think you forgot to throw this ${streamerOutput} in the return statement but I get what you’re going for.

I really like the ternary operator, I had no idea you could pass two arguments in like that! I went searching through MDN docs and saw “You can also do more than one operation during the assignation of a value. In this case, the last comma-separated value of the parenthesis will be the value to be assigned.” Very cool! Thanks for teaching me something I’m sure will come in handy.

Oops, forgot to add that back in before replying. That made it too DRY.:grin:

1 Like