Can't open TwitchTV channels from CodePen

1

I am trying to finish the Twitch TV challenge, and am stuck in being unable to fulfill one of the user stories, that being:
“I can click the status output and be sent directly to the Free Code Camp’s Twitch.tv channel.”

Instead, when I click on the button, a new window opens but fails to load the Twitch TV channel page even though the correct URL is shown at the top of the new window.

I tried to get something from the browser console (Cntrl-shift-J), but it seems that nothing is being displayed when the new window opens even though the correct URL is shown at the top.
target="_blank" has been included

The link to my CodePen is:
https://codepen.io/smithfred0987/pen/BxrVNX

My HTML code is:

     
     <div class="container-fluid">
  <div class = "row text-center">
    <h2>Twitch App</h2>
  </div>
  
  
</div>


<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard0" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result0title">Card title 0</h2>
    <p class="card-text" id="result0text">card text 0</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result0link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard1" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result1title">Card title 1</h2>
    <p class="card-text" id="result1text">card text 1</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result1link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard2" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result2title">Card title 2</h2>
    <p class="card-text" id="result2text">card text 2</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result2link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard3" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result3title">Card title 3</h2>
    <p class="card-text" id="result3text">card text 3</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result3link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard4" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result4title">Card title 4</h2>
    <p class="card-text" id="result4text">card text 4</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result4link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard5" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result5title">Card title 5</h2>
    <p class="card-text" id="result5text">card text 5</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result5link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard6" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result6title">Card title 6</h2>
    <p class="card-text" id="result6text">card text 6</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result6link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard7" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result7title">Card title 7</h2>
    <p class="card-text" id="result7text">card text 7</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result7link">Go to Twitch TV Channel!</a>
  </div>
</div>
<br><br>
<div class="card border-secondary" style="width: 18rem;">
   <img class="card-img-top" id="imofcard8" src="https://images.freeimages.com/images/small-previews/615/corcovado-sunset-1527899.jpg" alt="Card image">
<div class="card-body">
    <h2 class="card-title" id="result8title">Card title 8</h2>
    <p class="card-text" id="result8text">card text 8</p>
    <a href="#" class="btn btn-primary" target = "_blank" id="result8link">Go to Twitch TV Channel!</a>
  </div>
</div>

and my Javascript code is:


var channarr = ["MedryBW", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];


$(document).ready(function() {

      for (let i = 0; i < channarr.length; i++) {
    console.log("the value of channarr[", i, "] is: ", channarr[i]);
   $.ajax({
     type: "GET",
     cache: false, 
  dataType: 'json',
  url: "https://wind-bow.gomix.me/twitch-api/channels/" + channarr[i] + "?callback=?",
  data: "json",
     async: false,
   success: processResults,
});
         function processResults(json) { 
            $.ajax({
     type: "GET",
      dataType: 'json',
  url: "https://wind-bow.gomix.me/twitch-api/streams/" + channarr[i] + "?callback=?",
  data: "isitlive",
       success: arelive,
});
           function arelive(isitlive){
             if (isitlive.stream == null) {
               console.log("this stream is currently offline");
               document.getElementById("result" + i + "text").innerHTML="Now Offline";
            
           }
             else {
               console.log("this stream is currently streaming");
               document.getElementById("result" + i + "text").innerHTML=json.status;
             }
     console.log("the x value of channarr[", i, "] is: ", channarr[i]);
      console.log("the display name is: ", json.display_name);
      console.log("the game is: ", json.game);
     console.log("the logo link is: ", json.logo);
      console.log("the Twitch TV link is: ", json.url);
     document.getElementById("result" + i + "title").innerHTML=json.display_name;
      
     document.getElementById("imofcard" + i).src=json.logo;
     document.getElementById("result" + i + "link").href=json.url;
           
           
};
    
      
    };
                  
  }});
2

The API is hosted at https://wind-bow.glitch.me now instead of wind-bow.gomix.me, so your AJAX calls are doomed to fail.

You should also remove the async: false option as that will only slow down your app. The callback parameters at the ends of your URLs aren’t necessary either, but they don’t hurt.

3

Dear PortableStick:

Thanks for responding.

I made all the changes you suggested, but still suffer from the same problem in that the newly opened window fails to display the Twitch TV channel when the button is pressed.

You can see for yourself as I saved the modified code in Codepen at:
Please go to: https://codepen.io/smithfred0987/pen/VxXxjW

In other words, all your suggestions seem to be unrelated to the problem I am having.

I do not know if this is bug regarding Codepen?

4

You didn’t. Take another look through your code.

5

I just did again took a look at my code at https://codepen.io/smithfred0987/pen/VxXxjW
and I did what you told me, that being:

  1. change “gomix” to “glitch”,
  2. delete “async: false,”.

And just now, I deleted the “?callback=?” which you said did not matter.

I still have the same problem and I still do not understand why you are now saying that I failed to make the changes you suggested.

6

Check out line 20, my dude.

7

OK, that was a second ajax call, not for displaying, but only for determining whether it is live.

I just changed that too at line 20 and am still suffering from the same problem!

See for yourself at https://codepen.io/smithfred0987/pen/VxXxjW

8

It’s a different problem now, actually. While your app works as expected, Twitch kinda blocks requests that come from iframes, which is what Codepen uses to display your page. You could copy all of your work from your pen to another host and your links will work just fine. You could also just submit the app since this is a known issue with the project and it’s obvious that your links are going to the correct location.

9

Great!!

But shouldn’t the project description that students first view at https://www.freecodecamp.org/challenges/use-the-twitchtv-json-api
also be updated to reflect this?

Remember that one of the required user stories is that:
“I can click the status output and be sent directly to the Free Code Camp’s Twitch.tv channel.”

And since FCC advocates using CodePen, shouldn’t this project description be modified so that students will not get confused and post more discussions on this “known issue”?

10

The entire project is going to be taken from the curriculum in the coming update, if I recall correctly. At this point, it would be too much effort to explain the issue on the project page for little gain.