Twitch TV Project feedback

Twitch TV Project feedback
0
#1

Hi Everyone,

First off, I cannot thank everyone enough for all the help and feedback during my journey with FCC. Below is the link to my Twitch tv project. I would like to get some feedback. Any and all feedback is welcomed.

Thank you in advance!

#2

What I like:
Great work in completing the challenge. Congrats.

  • URLs are at the top of the program and can easily be customized
  • Easy to change and add new channels in the channelArr object
  • CSS definitions are good

How to improve the code:

  • Use the tidy js feature to format your code.
  • Break up the code into functions. Each function will do small amount of work.

Take some time to refactor your code, JavaScript Refactoring Techniques:
and Refactoring JavaScript: Turning Bad Code into Good Code

#3

In the following section of code, I think your class names ‘online’ and ‘offline’ are switched. Or maybe you decided to change the CSS class instead to make it work.

          success: function(data1) {
            logo = data1.logo;
            chName = data1.display_name;
            chUrl = data1.url;

            if (data.stream === null) {
              status = "<div id='row1' class='row online'>"; // shouldn't this be class of 'offline'?
              description = "Offline";
            } else {
              status = "<div id='row1' class='row offline'>";
              description = data.stream.channel.status; // // shouldn't this be class of 'offline'?
            }
#4

Also, you have an error showing in your console, because you added jQuery-ui before adding jQuery in your Codepen external JavaScript files section.

#5

Thank you for the feedback! I fixed the css for the online/offline issue and corrected the jquery error :slight_smile:

#6

Thanks roxroy! I will definitely try to add more functions and break things up. As for tidy js, i have never heard of it. I will look into it.

#7

Each Codepen module (HTML, CSS, and JS) have a Tidy feature (under the dropdown on the right of each module image) which will attempt to indent your code.

image
image.png974×861 37.1 KB