Super Twitch app

I think I’ve kinda finished this app
I know there’s definitely room for improvement but should be suffice for now, any feedback is greatly appreciated.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

Very impressive project interpretation. I like all the extra features and statistics.

One suggestion to make your code more readable would be to use template literals.

For example, you have the following large code using the append function. All those + operators used to concatenate the html together is hard to read.

$('.content').append("<div class='row generatedRow offline'><div class='col bg-success text-white'><div class='row'><div class='col-lg-2 col-md-3 col-12'><img class='img-fluid generatedImg' src='"
					 + logo +
					 "' alt='"
					 + name +
					 "'></div><div class='col'><h2>"
					 + display_name +
					 "</h2><cite class='hs'>"
					 + status +
					 "</cite></div><div><div class='row-12 row-lg-4 hs'><strong>Member Since: </strong>"
					 + memberSince +
					 "</div><div class='row-12 row-lg-4'><strong>Lastseen: </strong>"
					 + seen +
					 "</div></div></div><div class='row text-center'><div class='col hs'><strong>Followers: </strong>"
					 + followers +
					  "</div><div class='col'><button type='button' class='btn btn-sm btn-danger small'><a href='"
					 + url +
					  "' target='_blank' class='nav-item text-white'>OFFLINE</a></button></div><div class='col hs'><strong><i class='fa fa-eye'  aria-hidden='true'></i> Views: </strong>"
					 + views +

See below how you could use a template literal to make it more readable.

  <div class='row generatedRow offline'>
    <div class='col bg-success text-white'>
      <div class='row'>
        <div class='col-lg-2 col-md-3 col-12'>
          <img class='img-fluid generatedImg' src='${logo}' alt='${name}'>
        <div class='col'>
          <h2>${display_name}</h2><cite class='hs'>${status}</cite>
          <div class='row-12 row-lg-4 hs'>
            <strong>Member Since: </strong>${memberSince}
          <div class='row-12 row-lg-4'>
            <strong>Lastseen: </strong>${seen}
      <div class='row text-center'>
        <div class='col hs'><strong>Followers: </strong>${followers}</div>
        <div class='col'>
          <button type='button' class='btn btn-sm btn-danger small'>
	        <a href='${url}' target='_blank' class='nav-item text-white'>OFFLINE</a>
        <div class='col hs'>
          <strong><i class='fa fa-eye'  aria-hidden='true'></i> Views: </strong>${views}
  </div>  // you were missing this closing div 

Another thing about writing in this way, is you will see your original code was missing a </div>. It was very difficult to see that in your original code.

1 Like

Wow thanks! that does look a whole lot better, really blinded me building it the way I did, happy that I’ve learned something new👍