Looking for Javascript advice

[cmdonovann]

So, I'm trying to set up a little fanfiction archive for a tiny fandom that only has around 60 fics total. I would like to be able to sort these fics by a couple of categories: length (sorting shortest to longest), rating (sorting lowest to highest), ship (sorting ships alphabetically and by date within each ship category), completion (showing only completed fics in order of recency), and just a list of all the fics from oldest to newest.

Since I'm currently hosting this on Neocities, and there really aren't that many fics, my current solution is to just hard-code each category's list myself, and then have a little javascript to toggle between each list/sorting method. However, in the interest of making this project easier to maintain in the future, I am interested in eventually setting up a script that actually does this sorting for me, rather than having to hardcode each list individually myself. Is there a way to set custom parameters/tags of some kind to sort a list of items using javascript? (To be clear, I'm a total javascript noob, so if this question seems obvious or is worded badly, that's why.)

Example: for sorting fics by length, I would want to be able to give each fic a "length in words" attribute, then have a script that sorts and displays them from shortest to longest. For displaying all of the fic, I would want to be able to give each fic a "date published" attribute to sort from oldest to newest. For completion I would use the date attribute to sort them oldest to newest as well, but additionally filter out any that are marked as "unfinished" somehow? But I'm not sure how to practically do all this.

Any and all advice on javascript is welcome! Advising me to use something else will probably be ignored, because the entire purpose of doing it this way is to force myself to get better at javascript XD thanks for understanding!

Comments

[momijizukamori]

Absolutely doable in JS - I've done it before in jQuery, and will dig up the code for you (possibly tomorrow at this point, it was an internal work thing and I don't feel like logging back on), but jQuery is mostly just a helper layer on top of vanilla JS, so it shouldn't take me long to convert.

You can uses CSS classes, or data-[whatever] attributes, or if it's stuff you want to have as part of the visible HTML too, you can just yoink it out of that if it's got a handy label.

[cmdonovann]

ooh, yes, i would be interested in taking a peek at what you've got, either the jquery or vanilla js (or both; it might be interesting to compare, since i've never used jquery). whenever you've got time! (it's not a hurry btw, i'm busy as hell this month, i just posted this now so i wouldn't forget about it and planned to come back to look at comments in a week or two, haha.)

[momijizukamori]

OKAY SO. It turned out the existing JS is an ancient confusing mess (the last time I worked on it was like four years ago, and I inherited a lot of it from a previous person), so I went ahead and did some simple demos with hopefully sufficient comments to understand them. Both are pure vanilla JS - simple sort demo, and simple filter demo. These employ the same strategies the work code does, which performed fine on lists up to a couple hundred items, but above that I can't say.

A fancy addition to these would be to read and write the window url query parameters, so that you could share a specific filter configuration as a link - if you'd like, I can whip up a demo for that too.