Here's my TwitchTV project

Here's my TwitchTV project
0

#1

This is my version of the project. I think I could work on this forever, but would like to stop for input before I decide to move on or work on it further.

Please provide any feedback if you have any for me.


#2

One suggestion is to apply the gradient to the body tag instead of the div with id=“grad”. Currently, there is a white background below your div with id=“grad”. The other option is to add min-height: 100vh; to the #grad definition.

Another suggestion you can apply to this and any other project you do, is to make use of Template Literals. The following code is hard to read with all the string concatenations.

html+= "<div class='row userResult'><div class='col-md-2 userLogo'><img class='img-responsive' src='" + channelData.logo + "'></div> <div class='col-md-4' id='userName'><a href=" + channelData.url + " target=_blank> "  + channelData.display_name + "</a> </div><div class='col-md-6' id='userStatus'>" + status + "</div></div><br>";
$("#userDiv").html(html);

Using a Template Literal, I can rewrite the above code as below and it becomes much easier to read the html and also keeps your lines from wrapping around.

html += `
  <div class='row userResult'>
    <div class='col-md-2 userLogo'>
      <img class='img-responsive' src='${channelData.logo}'>
   </div>
    <div class='col-md-4' id='userName'>
      <a href=${channelData.url} target=_blank> ${channelData.display_name}</a>
    </div>
    <div class='col-md-6' id='userStatus'>${status}</div></div><br>
`;
$("#userDiv").html(html);

#3

Thank you. I will look into both of those issues.


#4

Wow! Templates sure made life easier. Thank you for that advice.