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!
)