Who twitches the Twitchers?

Code Feedback
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

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>`;