Requesting help in understanding code in Twitch.tv App

1

Hello. I am reviewing code written by Ayo Isaiah in his Medium article posted here: https://medium.freecodecamp.org/building-a-twitchtv-app-project-8824d61fe7a5

My question concerns the userHTML function which he calls in his fetchData function. He does not define the userHTML function at any point, so how does the DOM know to update itself using it?

Thank you for your assistance.

        if (data.stream === null) {
            url = data._links.channel.substr(38);
            updateOfflineUsers();
        }
        else if (data.status == 422 || data.status == 404) {
            status = data.message;
            updateHTML(".unavailable");
        }
        else {
            if (data.stream.channel.logo !== null) {
                picture = 'url("' + data.stream.channel.logo + '")';
            }
            else {
                picture = 'url("https://cdn.rawgit.com/ayoisaiah/freeCodeCamp/master/twitch/images/placeholder-2.jpg")';
            }
            url = data._links.channel.substr(38);
            status = "<a href='https://twitch.tv/" + url + "' target='_blank'" + "'>" + data.stream.channel.display_name +  "</a>" + " is currently streaming " + data.stream.game;
            updateHTML(".online");
        }
    }
2

I am also a bit confused by the quotation marks used in the first part of this variable assignment starting from "<a href and ending at >".

status = "<a href='https://twitch.tv/" + url + "' target='_blank'" + "'>" + data.stream.channel.display_name +  "</a>" + " is currently streaming " + data.stream.game;
3

Sure, here is the code in question:

status = "<a href='https://twitch.tv/" + url + "' target='_blank'" + "'>" + data.stream.channel.display_name +  "</a>" + " is currently streaming " + data.stream.game;

This is a common task in any programming language where you make a string variable by combining text with other variables. It is commonly called “building strings”. Let me give you a simpler example:

let firstName = 'John'
let lastName = 'Doe'

let fullName = firstname + lastName

let message = 'Hello there, ' + fullName

In this case, you are building a string which will eventually be an actual HTML element. So, the html would look something like this (p.streamer added as an example container):

<p class='streamer'>
  <a href='https://twitch.tv/johndoe' target='_blank'>John Doe</a> is currently streaming Minecraft
</p>

In the code you had, the variables for the link to the user’s profile, name, and game were programmatically added to the HTML at runtime, because not every user is going to be John Doe playing Minecraft and you have to get these values before you can add them to the HTML.

This code is was probably written before the addition of newer JavaScript features called “template strings”. Instead of adding variables to strings like using the + operator above, you can now include your variables in a special bracket. Make sure you use backticks instead of single or double quotes. Example:

let statusHTML = `<a href="https://twitch.tv/${url}" target="_blank">${data.stream.channel.display_name}</a> is currently streaming ${data.stream.game}`

I’ll look at your other code in question a little later if someone else doesn’t respond. Also, make sure you put code on the forums in backticks!

4

Also, an addition to my earlier statement once I edited the code in your post and saw your question better.

You can’t add variables to strings unless you use the template brackets like I mentioned above or add things together with the + operator. The quotes in the example are confusing because he is switching between single and double quotes.

Let’s put it simpler at first:

let status = "<a>" + name + "</a> is currently playing " + game

This clearly shows the strings and variables that are being added together. Now remember that the HTML needs to look like this:

<a href="https://url.tv/johndoe">John Doe</a>

So we have to include those quotes in the string we are building. We can’t put double quotes inside double quotes because that would close out the previous double quotes and not add our variables. Yes, I find that last sentence confusing too, so let me give example.

let status = "<a href="url.tv/johndoe">" + name + "</a> is currently playing " + game

Here the " before url closes out the first " at the start. You can see that by noticing the red color in the example. The opening quote at the end of href closes the opening quote at the start so url.tv/johndoe is not even in the string, and it is not a variable being added, because no + operator is being used. The solution is to use single quotes inside the double quotes, or if you normally use single quotes for strings, use double quotes.

let status = "<a href='url.tv/johndoe'>" + name + "</a> is currently playing " + game

Or if you prefer single quotes for strings like most sensible people

let status = '<a href="url.tv/johndoe">' + name + '</a> is currently playing ' + game

Or you can avoid the whole annoyance all together and use template strings:

let status = `<a href="url.tv/${user}">${name}</a> is currently playing ${game}`
5

Did you mean the “updateHTML” function, not “userHTML”?

He briefly mentions that all it does is update the DOM. He doesn’t show the code within the article, but you can see it in the Codepen link he provided near the end.

I do believe that Twitch has updated their API since that article, so it doesn’t look like his pen works at the moment.

6

Ah yes. I meant "updateHTML. Thanks for the Codepen link!

7

Wow. Very helpful. Thank you!

8

Hello. I am stumped on where each section of this code begins and ends.

status = "<a href='https://twitch.tv/" + url + "' target='_blank'" + "'>" + data.stream.channel.display_name +  "</a>" + " is currently streaming " + data.stream.game;

More specifically:

"<a href='https://twitch.tv/" + url + "' target='_blank'" + "'>"

I can further separate this out into:

(1) "<a href='https://twitch.tv/" + url + "'
and
(2) target='_blank'" + "'>"

I don’t understand the double quotations inside the single quotations in (1) and the double quotations between '_blank' and '>" in (2).

Drawing a huge blank here.

9

First off, something is funky with the last > in your second question - I don’t understand why he did it like that either. Instead of:

"target='_blank'" + "'>"

You can more simply do:

"target='_blank'>"

As there is no reason to add a string to another string like that. The first status also seems to be giving an extra single quote (hit run to see output):

https://repl.it/repls/PuzzledIdleWestafricanantelope

Now to the first question.

"<a href='https://twitch.tv/" + url + "'

Ok, I can see the confusion. Don’t look at the single quotes and think that you are adding two single quoted strings. Look at the double quotes like this:

"<a href='https://twitch.tv/" + url + "' ..."

First, get the obvious out of the way. You have two strings in double quotes and you are adding a variable in between them.

download (1)
download (1)716×175 3.03 KB

Again, don’t think of the single quotes as a new string you are adding together! You don’t have to add the single quote sections together. Your single quotes are inside the double quotes, and you are adding the double quoted strings together like above. When you open your single quote, everything forward in your double quoted strings will be inside the single quotes. This includes the url variable and anything else. Ignore all the closing double quotes and plus signs - they have nothing to do with your single quotes. Eventually, you later close the single quote. Everything in between your opening single quote and your closing single quote will be inside the single quotes.

download (2)
download (2)743×234 8.75 KB

Recap: You are adding a variable in between two strings. In the first string, you open a single quote. Later on in your second string, you close the single quote. Everything after the first single quote and before the closing single quote will be inside the single quotes in the returned string.

download (3)
download (3)790×313 12.5 KB

You can easily see this when you view the new status string!

https://repl.it/repls/SnappyBisqueAmbushbug

Again, it would simply be much better to use template strings here:

let status = `<a href="https://twitch.tv/${url}" target="_blank"></a>`