Twitch API project with radio buttons

Twitch API project with radio buttons
0

#1

This is Twitch API project and I’m facing some issues with radio buttons. When the Streams(all) radio button is clicked, it doesn’t return all of the results. I’m not sure what I’m doing wrong with radio buttons. Would be much easier for me to use regular buttons, but I spent a lot of time for making the radio buttons the way I wanted :sweat_smile: So just don’t want to give up on them))
I appreciate for your attention and help.
Also I’m still not finished and going to fix and update many things inside, but point me on any problems about my project.


#2

Your radio buttons are working fine. The problem is when you click on the radio button with value=“all”, you first are clearing out all of the html in the div with id=“stream” and then you call the output function. When the output function runs, it only uses the last values of video_banner, game, logo, name, and status. These last values were created when the final response came back from one of your getJSON calls. It could be a different stream each time, because getJSON is asynchronous and each call to the API is on its own timeline.

Before I can into how you can use your existing code to create a working solution, you first need to resolve an issue. You need to move the following input click handler to be outside the for loop but still inside the $(document).ready function:

  $("input").on("click", function() {
    if ($('input[value="all"]:checked').val()) {
      $(".stream").html("");
      return output();
    } else if ($('input[value="online"]:checked').val()) {
      $(".stream").html("");
    } else if ($('input[value="offline"]:checked').val()) {
      $(".stream").html("");
    }
  });

Why? Because keeping inside the for loop is creating duplicate click events for each streamer. Your current solution has 8 streamers, so there are 8 click events attached to each streamer. That is taking up extra resources and could slow down your app.

Possible Solution

To make your code work, as you are building the cards, you need an easy way to identify a streamer's status, so the function you have yet to create will use this identifier to correctly display all, online, or offline. One way to identify the status is to add a class name like "online" and "offline" to to the div with class="card". So an online streamer would have a div with class="card online". Then in your radio button click event handler function, you will run a new function which will use the value of the radio button to know which cards to display. You can use show() and hide() JQuery functions or use css to hide and show the cards. I will let you figure out which approach you should take. The "all" is the trickier one because you must select both online and offline statuses, but it can still be done.

Hopefully, this helps you get started without completely giving away the solution. If you have further questions or need any clarification about something I have written here, let me know.

Happy Coding!


#3

Thank you so much. I really appreciate for your help. I was following your guide and made everything work :smiley:. I feel like it was a lots of extra coddling, is there any way I could summarize and make it shorter and more clean?
And also on the smaller devices it doesn’t scroll, it just takes the page to the top, any ideas of what I could be missing?