FCC Twitch API Project Review: Help with CSS Grid/Flexbox

1

I’m almost done with my Twitch API Project but had a question regarding CSS Grid/Flexbox.

Right now when I decrease the width of the browser to lower than 506px the games-row collapses and no longer aligns properly with the rest of the columns.

How do I get it so that when the games-row collapses, it just increases the height of the whole row so that all the information is still properly aligned?

Thanks in advance!

2

Set min size for game column:

.main {
  ...
  grid-template-columns: auto auto minmax(10%, auto) auto;
  ...
}

Add this selector to prevent line braking and add ellipsis (three dots) when text overflows:

.user-game > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
3

thank you for the response!

Adding the suggested CSS code helps keep everything in the rows aligned but I actually want the rows to wrap while still being aligned.

For instance, when the row with username CRETETION, and the game “Tom Clancy’s The Division” collapses into 2 rows, I want the username, status, and viewers of that row to take up 2 rows (1 row with the information, and a blank row below it) so all the rows are still aligned.

How would I achieve this?

4

The way you did it right now it’s impossible. You currently have only 2 rows: title row and content row and what you think are individual rows are just a text in column. For example add border to .user-game and see that it’s just a one single element.

5

So I would need to define a row for each row of information like : grid-template-rows: repeat(9, auto);?

How would you go about solving this?

6

Your problem is in your javascript. Currently you’re going through columns and filling them with spans. What you should do is create rows consisting of username, status, game and viewers and appending those rows to .main (or any other container).

1 Like
7

thank you very much. i will try that

8

Would also suggest looking into using insertAdjacentHTML and writing the HTML using template literals.



9

So I updated my JS using .insertAdjacentHTML with template literals (thanks again for the suggestion/insight) but now I am unable to access any of the elements I have created using .insertAdjacentHTML (line 48-51 in my JS). Is there a different method of selecting elements created using .insertAdjacentHTML that I am unaware of?

10

so I was able to solve this issue using this code:

           let userData = [...main.children]
            
            for (let i = 0 ; i < userData.length; i++){
                if (userData[i].className === 'user-status' && userData[i].textContent === 'Online'){
                    userData[i].style.color = 'Green'
                } else if (userData[i].className === 'user-status' && userData[i].textContent === 'Offline'){
                    userData[i].style.color = 'Red'
                }
            }

but still curious about why I can’t just use a class Selector?

11

You have a variable userStatus that gets assigned once, but never updated, so it always stays empty (it has no content).

12

ah i see. I think I am done now. Do you have any other feedback for my project?

13

You probably don’t need to fetch data each time user click “Online”/“Offline”/“All”, just filtering local data would be enough and it would be much much faster.

14

Personally, I would take advantage of the fact that you can write the HTML as you would normally, like Wes shows in the article.

const userStatus = `
  <a href="https://www.twitch.tv/${data._links.channel.substring(38)}" target="blank">
    <div class="user-name">${user_name}</div>
  </a>
  <div class="user-status">${user_status}</div>
  <div class="user-game">${user_game}</div>
  <div class="user-viewers">${user_viewers}</div>
`;

main.insertAdjacentHTML('beforeend', userStatus);