Use the Twitch JSON API feedback please

Use the Twitch JSON API

Please take a look to my solution. This challenge was a bit difficult because I did not find any usable project… Even the example page don’t work.

Codepen
Live page

I have also several error on console:

  • on live page:

Failed to load ‘’ as a plugin, because the frame into which the plugin is loading is sandboxed.

  • If I click on twitchTV icon (right-bottom) I get the same error like on the example page:

Uncaught DOMException: Failed to set the ‘domain’ property on ‘Document’: Assignment is forbidden for sandboxed iframes.

but on localhost I don’t get the above error. The twitchTV site open on new tab as well.

  • on localhost:

GET chrome-extension://invalid/ net::ERR_FAILED

I have not idea how to fix these errors… :frowning: , but the app is running.
You can add new user to the list, or delete anyone or filter online/offline and also is it responsive… Try on mobile too or resize the window.

-------------------------------------- Updated -------------------------------------------------
I found a solutions to fix the second error: Assignment is forbidden for sandboxed iframes.
Ones the iframe element rendered have to add an attribute to the iframe:

document.getElementsByTagName("iframe")[0].setAttribute("sandbox", "allow-scripts allow-top-navigation");

Now if click on twitchTV icon it’s open the channel in new tab…

Left of more two issue…

Code modified at 29. May 2020.
From 1th of May is a must to send access token if we want to send get request to the helix endpoints. I modified the following:

  • I completed the AJAX method: now it is handle also POST request. We need send POST request to get an access token.
  • I completed also the AJAX object with the “Authorization” header.

After these two modify my project works well again…

The responsiveness to changes in browser width is fairly good. I like how the carousel shifts to vertical for a narrow view. I’m not sure I’m crazy about the prev/next buttons being on the side of the page like that though.

Responsiveness to text size increases needs some work. Even with just a slight increase in text size the prev/next buttons start covering the content. And I lose the ability to click on any buttons in the TV screen (they fall off the bottom of the screen).

I can’t click the Offline/Online buttons at the top using the keyboard. Those should be actual <button>s.

The carousel itself is very jerky and slow for me using FF 76. It’s much better in Chrome.