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

[lieutenant_sanya]

Hello! I stumbled across your entry and thought I'd try a hand at it. Do you mean something like this? Very bare-bones example—but JS can filter and organize your works for you. In the first version I made, it needed you to edit the HTML and JS for new fics, but I rewrote it so that all you have to do is add more objects to an array; the JS will do the rest of the work in sorting and displaying it.

All of the fics' details (name, length, completion status, summary, etc.) are objects in an array I named "fics". The incomplete/complete checkboxes toggle {display: none} or {display: block} on the respective works depending on if they're checked. For the sorting functions, I made the parent main tag a flex box so JS can use the {order} property to organize the child sections according to word count/name/etc.

I can send the HTML and JS files to you if you'd like. :) Now I too want to start some sort of fannish fic archive, hahah.