Twitch Challenge - Search user query issue

#1

Hi Everyone,

I am wrapping up the Twitch challenge and I am facing 2 issues. 1 big, 1 smaller!

The big one:

I implemented a search feature to search for any Twitch streamer, not only those part of my array. My problem is, if a streamer is offline, it is more likely that nothing will show up, even if I put an error message in case a user name doesn’t exist. If I enter a non existing user name, I am having an error message, but if i am entering freecodecamp, nothing is showing up… I’ve been trying to look for the issue but wasn’t able to find the probleme. Can you help?

function search(){
name = document.getElementById("search").value;
  $(".listOff").hide();
  $(".listOn").hide();
  $(".searchResult").html(`<a onclick = "cancelSearch()">Clear</a>`);
  
 var userOff = name; 
   $.getJSON(
    "https://wind-bow.glitch.me/twitch-api/streams/" + name + "?callback=?",
    function(data) {
      if (!$.trim(data.stream)) {
        $.getJSON(
          "https://wind-bow.glitch.me/twitch-api/channels/" + name + "?callback=?",
          function(dataOff) {
            if (dataOff.status === 404){
              $(".searchResult").append(
              `<div class = "error">Enter a valid user name<br>`
            );
            }
            else{
            $(".searchResult").append(
              `<li class = "row infoOff">
    <div class = "picOff col-sm-2"><img src = ${dataOff.logo}></div>
    <div class = "userName col-sm-3">${dataOff.display_name}</div>
    <div class = "stream col-sm-6">Offline</div>
    <div class = "watchStream col-sm-1"><i class="far fa-frown"></i></div></li>`
            )};
          }
        );
      } else {
        $(".searchResult").append(
          `<li class = "row infoOn">
    <div class = "picOn col-sm-2"><img src = ${data.stream.channel.logo}></div>
    <div class = "userName col-sm-3">${data.stream.channel.display_name}</div>
    <div class = "stream col-sm-6">Game streaming: ${data.stream.game}</div>
    <div class = "watchStream col-sm-1"><a href =${data.stream.channel.display_name}><i class="fa fa-play-circle"></a></i></div>  
    </li>`
        );
      }
    }
  );

  document.getElementById("form").reset();
}
function cancelSearch(){
    $(".listOff").show();
    $(".listOn").show();
    $(".searchResult").hide();
  };

The second smaller issue is with my toggle button. I can’t have it to come back to it’s original state, even if my code looks OK.

var clicked = 0;
function clickIt(){
  clicked ++
  
  if (clicked % 2 === 1){
      $(".listOff").hide();
    $("#toggle").addClass('fa fa-toggle-on');
    $("#toggleText").html('Online streamer');
  }
  else {
    $(".listOff").show();
    $("#toggle").addClass('fa fa-toggle-off');
    $("#toggleText").html('All streamer');
    clicked = 0;
  }
};

Here is the link to my codepen: https://codepen.io/nico3d911/pen/xYOJva

Thank you!

#2

Ah, i applied a similar functionality ( my pen :slight_smile:)

Btw If you delete freecodecamp from your array and then you search for it, it will show up ^^
Furthermore, trying the toggle button after that it will switch from the result of the search ( freecodecamp) and the ordinary list ^^

Hope it helps,
-LyR-

#3