Help with Twitch TV Project

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:

The FreeCodeCamp information is put into a div section that has the following structure:

      <div class='row block'>
        <div class="col-sm">
          <h1><!-- logo goes here --></h1>
        </div>
        <div class="col-sm">
          <h1><!-- username goes here --></h1>
        </div>
        <div class="col-sm">
          <a href='https://www.twitch.tv/username' target='blank'>
            <h1 id='status'><!-- status goes here -->.</h1>
          </a>
        </div>
      </div>
    </div>

Currently, for the rest of the streamers, you are just appending all the logos to a div with id=‘logo’, and appending the usernames to a div with id= ‘name’, and finally appending the status of each streamer to a div with id=‘status’.

My suggestion, is to delete all of the inner html of the div at the bottom which only has a class=‘container’ in it and then using your for loop, dynamically create the above html and put it into a string for each steamer. You would then only use one append per streamer to add the html string content to this div with class=‘container’. I suggest giving it an id, to make it easier to target with the append.

1 Like

You are a scholar and a gentleman. Cheers!

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.

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

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.

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

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.

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

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: