Twitch App (Javascript feedback)

Twitch App (Javascript feedback)
0.0 0

#1

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.


#2

amazing! great job!!!


#3

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

#4

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.


#5

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