Who twitches the Twitchers?

Who twitches the Twitchers?
0

#1

Hi,

I welcome comments on my Twitch app: Who twitches the Twitchers?

I’m chuffed that I only have the advanced projects remaining to claim my front end cert. Yeah!

Cheers,
Tom


#2

First, congratulations on creating the Twitch app!

I only have a few minor suggestions for your code.

#1) This suggestion is more about creating a consistent syntax through out your code. For example, sometimes you are creating functions like:

let nameOfFunction = function(arg) {
  // other code inside function
};

and others you are writing functions like:

function nameOfFunction (arg) {
  // other code inside function
}

#2) It is typically best practice to use the const key word instead of let for a function definition, because unless you are planning on changing the function definition, it is assumed it will not change through out your code

#3) Whenever possible, try to not repeat code. I see the following function declared twice in your solution. It would be best defined as a stand alone function one time which would be accessible to all functions.

let error = function() {
  console.log(`Error Axios`);
};

The same DRY (Do Not Repeat Yourself) concept also would apply to your re-declaration of variables like the following:

let logoI = document.querySelector("#logo" + i);
let liveStatusI = document.querySelector("#liveStatus" + i);
let nameI = document.querySelector("#name" + i);
let statusI = document.querySelector("#status" + i);

#4) My final suggestion is to thinking about how you want your solution to look on a mobile device. Currently, when the screen width is narrow, your design looks more jumbled (see below). Consider displaying the different channels in such a manner as to define a clear separation of each one. Another thing you will notice with a smaller width device is how the alignment of the “Live” is not consistent.


#3

Thank you, Randell!

Great suggestions. It’s the little things as they say! Once I’m finished with my calculator project, I’ll tighten up my Twitch project code. Thanks again for the feedback!

Cheers,
Tom


#4

Randell,

Thanks again for your feedback. I refactored to address #1, #2, #4, and some of #3. But I cannot figure out how to DRY code this:

let logoI = document.querySelector("#logo" + i); let liveStatusI = document.querySelector("#liveStatus" + i); let nameI = document.querySelector("#name" + i); let statusI = document.querySelector("#status" + i);

I tried declaring the above at the beginning of my code, where I also declared:

let i;

This resulted in only one channel displaying in the browser. I am using variable “i” to create 10 channels. One function creates live channels and another creates offline channels. Both rely on i. But when I declare the variables above outside these functions (for both functions to share), my for loop doesn’t create 10 channels. Do you have a suggestion on how to DRY code this functionality?

Cheers,
Tom

PS: almost done with my calculator!


#5

…I just learned a valuable lesson: debug in multiple browsers. My app worked fine in Firefox, but the logo images were not loading in Chrome, Opera, nor IE. I’d made a mistake in the html that Firefox resolved, but the others didn’t. After debugging a couple of hours in Chrome, I spotted the mistake. I had used this:

            <img id="logo0" src="" alt="">

…when I should have used this:

            <a id="logo0"></a>

…as a placeholder until the app could dynamically set logo${i}'s innerHTML with:

<a id="logo0" href="https://www.twitch.tv/food" target="_blank"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt="logo"></a>

Lesson learned!


#6

The corrected JS code is:

logoI.innerHTML = `<a id='logo${i}' href=${url} target='_blank'><img src=${logo} alt='logo'></a>`;