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
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
I do like the direction you have taken with the Twitch.tv app. I would like to make two suggestions which would improve the user experience.
It would be great if the search worked when pressing the Enter key as well as clicking the Go button
If I enter a name that does not exist, I think it would be better to have a message appear letting the visitor know there is no such streamer. You do that currently, but it creates an entry that the user must click to remove the streamer. I think a message dialogue that has a simple “Close” or “X” on it is. To me, only valid streamers should show up after a search is performed.
EDIT: I have one more suggestion.
Since you have a Sort dropdown, why not sort by streamer name within each category. If someone selects All, then you could either sort by category first and then my streamer name or just overall by streamer name. Just my 2 cents worth.
I would strongly suggest only using alert() for debugging purposes only. My suggestion is to create a div (hidden by default) with a place holder for the error message you want to display. When you want to display the error, you can change out the html inside of this div with the applicable error message. This div will have a z-index of 1 so it will sit on top of your app until you click “close” or some other button. Then you will add an onclick handler for the “close” button which will change the css of the div back to display:none;.
UPDATE: Below is another option for the remove if you were to add a data-user attribute which was the same as user-id variable to the button like below:
How about adding a stand alone function to handle displaying the error message instead of duplicating all that code:
function showError(user_id,message) {
$("#alert_box").html(
"<button type='button' id='close_button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button><strong>Whoops!</strong> " + message);
$("#alert_box").css("display", "block");
$("#close_button").on("click", function() {
$("#alert_box").css("display", "none");
$("#alert_box").html("");
});
// $("#user_input").val(""); if you clear the input, someone can not just fix a typo
}
Then you can call the function with:
showError(user_id, "That streamer's already been added");
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
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
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.