Project Review: Twitchtv JSON API

Project Review: Twitchtv JSON API
0.0 0

#1

Hey guys,

How do you doing? Just complete the “Twitch.tv” project. I need your valuable review on design and coding anything. It’s always help me to go with the flow. Here it is: https://codepen.io/a2-zubair/pen/yvxwWE

Thanks guys. Happy Coding :cowboy_hat_face:


#2

See if you can make the following code DRY (Do Not Repeat Yourself). The only thing different about those appends are the words offline and online used in the class attribute. See if you can make use of a variable for these and move the append outside the if/else statement.

            if(streamData.stream === null){
              status = "Offline!";
              $("#channel-box").append("<div class='ch-box offline'><div class='cL'><img src='"+cData.logo+"' alt='channel logo'></div><h3 class='ch'>"+cData.display_name+"</h3><p class='des'>"+status+"</p><a class='link' href='"+cData.url+"' target='_blank'>Visit Channel</a></div>");              
            }else{
              status = streamData.stream.channel.status;
              $("#channel-box").append("<div class='ch-box online'><div class='cL'><img src='"+cData.logo+"' alt='channel logo'></div><h3 class='ch'>"+cData.display_name+"</h3><p class='des'>"+status+"</p><a class='link' href='"+cData.url+"' target='_blank'>Visit Channel</a></div>");
            }    

#3

Thanks for your review.


#4

What about replacing these three click event handlers with a single click event handler to make your code a little more DRY?

  $("#all").on("click", function(){
    $(".online, .offline").show();
  });
  // online button
  $("#online").on("click", function(){
    $(".offline").hide();
    $(".online").show();
  });
  // offline button
  $("#offline").on("click", function(){
    $(".online").hide();
    $(".offline").show();
  });
  function showAndHide() {
    var show = $(this).attr("id");
    if (show === "all") return $(".online, .offline").show();
    var hide = show === "online" ? "offline" : "online";
    $("." + hide).hide();
    $("." + show).show();  
  }
  
  $(".status-box").on("click", showAndHide);