A unique take on the Twitch.tv app

Code Feedback
1

Hey guys,

First project that I felt had a good design and interesting interaction, so I’d like a little feedback if possible. I’ve been adding to it here and there as I feel needed :slight_smile:

EDIT2: On recommendation, I’ve added a few features:

-Enter will now work with the search bar
-An alert pops up if you try to add an existing streamer
-There is an animation for adding or removing a streamer, which is now very smooth thanks to rmdawson71!
-If a streamer does not exist you get an alert

Thanks,

Bill

3

Thanks for the feedback. I instinctively hit enter myself and hadn’t gotten around to making that happen, haha.

The message with an X would be much better I agree. I’ll implement that.

And I’ll optimize the sort menu as well.

5

Will do, thanks again.

7

Added your last option and it looks beautiful now. Thanks for all your help.

9

Yes, one thing I learned was that if you need to use a bit of code more than once, you should probably use a function :slight_smile:

It works good.

10

HTML validator shows following errors:

Attribute “;” not allowed on element “div” at this point.

<div class="btn-group";>

The element “button” must not appear as a descendant of the “a” element.

<a href="https://..." target="_blank"><button class="btn ...

The “aria-labelledby” attribute must point to an element in the same document.

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">

It’s not recommended to use ids in CSS - they have a high specificity. Reserve them for JS and use classes for styling.

You should cache your jQuery selectors. Here

$('#alert_box').css('display', 'block');
    $('#close_button').on('click', function() {
      $('#alert_box').css('display', 'none');
      $('#alert_box').html('');

jQuery each time searches the DOM for #alert_box. Save it to variable and use it (const alertBox = $('#alert_box') and then use it like alertBox.css(do stuff))

Also if you wrap input element in a form, you don’t have to do if (e.keyCode == 13), you’ll get submit on enter for free :wink:

11

Thanks for the pointers. I’ve been optimizing it a bunch, so some stuff might have stuck around when I didn’t mean for it to be there. :smiley:

Overall, this has improved quite a bit in the past couple of day’s so I’m quite happy with all the feedback so far.

Added your suggestions, I appreciate learning ways to simplify my code (such as saving an annoying to type jQuery request as an easy variable).

12

You can also chain in jQuery.

alertBox.css("display", "none");
alertBox.html("");

is the same as

alertBox.css("display", "none").html("");
1 Like
13

Good point. I’ve been using the dot chains a lot lately all over the place so I’ll keep them in mind.

14

In JS variables usually use camelCase: var twitchApiUser instead of var twitch_api_user.

HTML has select element for dropdown lists. It has onchange event.

You can use it like this:
HTML:

      <select name="Sort" id="dropdown">
        <option class="dropdown-item" id="all" value="all">Show all</option>
        <option class="dropdown-item" id="online" value="online">Online</option>
        <option class="dropdown-item" id="offline" value="offline">Offline</option>
      </select>

JS (without jQuery):

  document.getElementById('dropdown').addEventListener('change', handleFilter);

  function handleFilter(e) {
    console.log(e.target.value); // here you'll have selected value
  }

Then if you save your list of users in an array, you can iterate over it and filter out results to show on the page.

Also as a challenge you could re-write your app without using jQuery and Bootstrap :slight_smile:

15

Thanks. It’s been a habit naming things a certain way from Python so I’m still getting the etiquette down lol. I definitely want to be good at vanilla JS so that’s a solid idea.