Completed my Twitch TV Interface - Feels much more confident with every single challenge that I complete

Completed my Twitch TV Interface - Feels much more confident with every single challenge that I complete
0

#1

Hi Guys,

Completed my Twitch TV Interface.
After all these challenges, now I feel much more confident with HTML,CSS,Bootstrap,JSON/AJAX & Jquery. :slight_smile:

Determined to obtain all the certificates. :nerd_face:

Anyways, appreciate if you guys can have a look at my work.


#2

I seems to work correctly. The only thing I noticed was on a mobile device the text wraps underneath the logo.

image


#3

Few minutes ago I noticed that too… :slight_smile:
Do you have any suggestion to overcome it?


#4

You could either separate the logo from the channel information with separate divs or get rid of the margin-bottom: -10px; on the image.


#5

Getting rid of the margin-bottom -10px did the job.
Thanks a lot :slight_smile:
I think nesting the text in a separate div will be visually much more cleaner.


#6

The only other suggestion I would make would be to make your JavaScript DRY. For example, both allFunction and refreshFunction have the following code:

  $(".of").css("opacity", "1");
  $(".on").css("opacity", "1");
  $("#channelSection").css("opacity", "1");
  $(".on").css("height", "100%");
  $(".of").css("height", "100%");

This would be better served in a function by itself and then called inside those two functions. It reduces the number of lines of code and cleans things up.

Also, you can actually reduce the above code further, because you can actually change multiple properties on the same selector.

  $(".of").css({ opacity: "1", height: "100%" });
  $(".on").css({ opacity: "1", height: "100%" });
  $("#channelSection").css("opacity", "1");

See if you can find other places in your code where there is at least 90% repeated code. The other 10% could be dealt with by using function parameters to pass in the parts that are different. For example, the following two functions could be easily converted into one function using this thinking:

//Function Online button click event handling.
function onlineFunction(){
  $(".of").animate({opacity: 0},500,function(){
  $(".of").css("opacity", "0");
  $(".on").css("opacity", "1");
  $(".of").css("height", "0");
  $(".on").css("height", "100%");
  });   
}

//Function Online button click event handling.
function offlineFunction(){
  $(".on").animate({opacity: 0},500,function(){
  $(".of").css("opacity", "1");
  $(".on").css("opacity", "0");
  $(".on").css("height", "0");
  $(".of").css("height", "100%");
  });
}

Give it a try. If you get stuck, we can help you out.


#7

Wow! this is the best review I received so far.
Lot of valuable Ideas :star_struck:

I will try these things. :+1:


#8

I was able to reduce the 16 lines of actual code of the two functions above to one function with only 7 lines.


#9

Cool!
I have a straregy in my mind to merge the two functions.
Lets see how that goes. :thinking: