Almost finished and would love your feedback!

I have almost finished the Twitch project. Here is my pen: https://codepen.io/bencarp/full/WpbEoj/
Here are current issues I’m facing:

  1. When first loading one of the images in the online tab does not fill the column. It’s all ok after clicking offline and returning to online. If u can’t duplicate this bug see image below.
  2. I wonder how to implement the functionality of the search box. I would probably just search within the names of the channels, or the display name. Any suggestions on how to do so? Perhaps a recommended function to search within an array of strings?
  3. Last but not least, one of the requirements is to present data regarding the current stream. The URL for the request for info about stream I’m using is: “https://wind-bow.gomix.me/twitch-api/"+“stream”+"channel” . It does not provide any additional information about the stream, and it is unclear if and how we can receive such info.
  4. General feedback about functionality and code?
    Ben

    (@BenGitter @PortableStick @timotheap @kevcomedia @obolland)

Filling the channelsData with objects based on the values in channelNames is a good place to use the .map function. You can replace the for-loop with

var channelsData = channelNames.map(name => ({
  name, // ... shorthand for `name: name`
  urlUsers: `${bUrlUsers}${name}`, // ... using template literals here is probably overkill
  urlStream: `${bUrlStream}${name}`
}));

// also, note that I surrounded the thing with a pair of parentheses, so JS knows that I want to return an object for each name, and not mistake it for a function block
(non-ES6 version if you're interested)
var channelsData = channelNames.map(function(name) {
  return {
    name: name,
    urlUsers: bUrlUsers + name,
    urlStream: bUrlStream + name
  };
});

I noticed that you have a couple of variables that get a certain value depending on whether some condition is true or false. I think that those are simple enough that you can use the ternary operator without hurting readability.

classh = channelsData[i].hasStream ? "streamTrue" : "streamFalse";
info = channelsData[i].hasBio ?  channelsData[i].bio : "Sorry, the channel has no bio to share :-)";

Also, in one of those that assigns true or false, since you get true when response.stream is not null, you can coerce this object to a boolean and use that value instead.

// true if `response.stream` contains an object
// false if `null`
channelsData[i].hasStream = Boolean(response.stream);

The rows initially have display: flex; (via the vertical-align class) which causes the rows to behave like that. When you click on the Online button, that is overridden by an inline display: block; (which is the default for <div>s), and the col-* classes in it work again as expected.

I’m thinking of filtering the array of channel names for strings that contain the search string, then do a series of JSON requests for the filtered names.

If the streamer is online, you can find what is being streamed in the channel object (nested in the stream object) (or you can probably use the game string in the stream object)

1 Like

The images aren’t lined up because their default value isn’t block. It’s fixed when you click around because you have a jQuery.css function that sets them to block. You can just set their initial display value to block in your CSS.

Searching for one user is simple enough since you just have to modify your json api call. I don’t see how you can easily search multiple users unless Twitch.TV provides that feature… Maybe use Google’s API but you can imagine what a headache that could be.

If you’re having trouble reading the contents of the API I recommend putting it directly into your URL, copy pasting it into your JS and using CodePen’s “Tidy JS” function to neatly organize it.

Thank you so much @kevcomedia. If possible I’d give your reply 6 stars.

I looked at the Mozilla documentation for the array.map function. However, I couldn’t find info about the syntax you were using (probably because it’s new). while the whole name => is quite intuitive, it’s unclear why the parantheses is necessary. I’d assume that even without it an object for each value would be returned. I don’t understand how js can mistake it for a function and would be happy to read documentation about it.

Beautiful.
I corrected the other issues according to your suggestions.

Regarding the Search.

We make http request for all the channels when the page first loads, so no need to make another request. I’m thinking we’ll just filter either the name or the display name of all channels. for those that have a match we’ll add a class “search?True” for those that don’t have a match we’ll add the class “search?False” and then use css to hide search?False. Does this make sense?

I was actually aware of the “game” field. But twitch has channels which are not just about games, such as the freeCodeCamp channel. It will be strange to use the game field for the freeCodeCamp channel.

Thanks again!

lol sorry for the dumb response I thought you really wanted to search the entire Twitch.TV database instead of just the ones that are already defined in your code.

Check this out:

http://codepen.io/jx2bandito/pen/wJdyVY

To hide the parent of an element just use jQuery’s .parent().hide(); or .parent().addClass(“searchFalse”) where searchFalse is a class with display: none. Unless the parent itself is what you’re searching through then it’s easy as .hide() and .show();

Oh and since jQuery uses CSS selectors you could use the nth-child(x) operator. imo each result should have a universal class just so you can keep track of them all. For example, “twitchResult”.

This will let you use $(".twitchResult: nth-child(x)"); . where x is the index of your loop, starting at 1.

Maybe you can use the status property (it’s also in the channel object, if I remember it right).

That could work. When you hit the “Search” tab, you’ll see a list of all streamers. Then when a search string is entered, it will filter out (or hide) those that don’t match the string.

1 Like

The project is ready :slight_smile: Wohoo!
There is a small problem I’m still facing: In the Online/Streaming channels I’m using ‘\n’ and ‘\t’ in the info string, but it doesn’t show in the final HTML.
All are welcome to provide feedback.
Thank you @kevcomedia for your help!