Help with Twitch TV Project

JavaScript
1

Hey, all!

I am currently working on the Twitch TV intermediate front-end project.

I have been trying to divide each streamer’s logo, name, and status into a single div block.

You will see in my code at the top I have divided FreeCodeCamp’s logo, name, and status into its own div block. I would like to do the same thing for each of the users.

Here is my code: https://codepen.io/JayDevelopment/pen/bMKrLK?editors=1010

I have done my best to explain my challenge, but if things are still not clear, please comment and I can respond appropriately.

I thank you in advance for your time and patience :slight_smile:

3

You are a scholar and a gentleman. Cheers!

4

Hey, campers!

I am finishing up the TwitchTV project but have been struggling to figure out how to append some code with jQuery. This code needs to check the API to see if a user is streaming or not, then, depending on if he or she is or not, append information to an already dynamic, jQuery produced html.

Take a look at my JavaScript code. Right now, under the “status” row, you will see each user has info. If the user is offline, I would simply like to have the html read “offline.” If the user is online, I would like it to read "Online: " plus a short description of what the channel is about (the stream information is stored in a variable called “stream,” and the short description is stored in a variable called “statusWhat”).

I’m sorry if that is a bit confusing. I think seeing the code will make things clear: https://codepen.io/JayDevelopment/pen/bMKrLK

If anything is unclear, please do not hesitate to ask. I am thankful for all help.

5

You seem to have already done this for the freeCodeCamp account. Does this not work in the rest of your code?

6

Hey, thanks for reaching out. I am not finished with the project yet. I cannot get the “status” row to populate correctly because I have not yet found out how to make it work. It is a bit more tricky for me because I have to do an if, else statement and then append certain code depending on the results.

7

Right, and I’m saying that you’ve already done this.

 if (data.stream === null) {
      $("#fccStatus").html("OFFLINE");
    } else {
      $("#fccStatus").html("FreeCodeCamp is ONLINE");
    }

You know what you need to do, and you’ve already done it. What exactly is the problem you’re having?

1 Like
8

Yes, I understand the algorithm part I believe. The code snippet you quoted is just for the FreeCodeCamp stream. I also need to do that for the rest of the streamers. Maybe I am just completely blanking out on this, but it seems more confusing having to take the algorithm and make it work within a for loop that is already dynamically populating html. If you look near the bottom of my JavaScript file, you will see I commented out a second if, else algorithm that I have been trying to get to work with the rest of the streamers. I thank you for your patience.

9

The loop doesn’t introduce any problems here. Rethink 1) when you’re performing your if... else check, and 2) how you’re creating the markup to display for each user (hint: append() may not be the best option here).

1 Like
10

Thanks for all the helpful hints!

For those who may have similar questions as I had, I found a solution by storing the stream variable in an if statement:

if (data2.stream) {
            var stream = "ONLINE: " + statusWhat;
          } else {
            stream = "OFFLINE";
          }

Check out my finished project here: