A basic tierlist-maker "clone" with vanilla JS and pure HTML/CSS. No frameworks.

And lots of Naruto characters.

Have you ever tried to ACTUALLY understand how does a doubly linked list works?

Surely there are plenty of good resources out there with accurate information (or you might already have a grasp of how it works), but how about learning INTERACTIVELY ?

(It's funny what Google understands by "interactive" or "fun"... a whiteboard video explanation) 🙄

Ok, there MIGHT be out there a couple decent resources with code examples you can click, press play, pause, rewind... but let's be honest, are any of those actually FUN ?

Of course not. But don't give up just yet!

Now you will have EXACTLY that... and with Naruto characters!! 🥷 🍃 🍥

Now, shameless self promotion and bad jokes aside, this is a very simple project that tries to clone how a tierlist works. It gives a nice visual of how a doubly linked list structure can be applied to a real example and understand its internal working. (Open your browser's console, you are in for a ride)

When I started this project, I was convinced that I needed a doubly linked list DS in addition to all the javascript code I needed to simulate a tierlist's behaviour, being that part the first I developed with the corresponding tests. I also wanted to work with good ol' vanilla javascript and try learn a couple new tricks along the process.

However, the HTML Drag and Drop API provides all thats needed to create a fully functional tierlist, rendering all my previous code useless. (I will google stuff first... Lesson learnt 🥲).

So... to avoid throwing all that beautifully handcrafted code, I thought giving the project a more "educational" focus.

Note: This project merely attempts to illustrate a concept that you should already be familiar with. I hardly believe you can learn in depth the inner workings of this DS by just playing around (to actually learn more, take a look at how the DS is structured, look the tests too). Use the app to reinforce that existing knowledge (or better, to classify shinobis).

• A DoublyLinkedList is created for every tier with which you can interact with from the your browser's console (Try typing its name).
• All operations will be seen on the console, and a brief description of each tier components will be shown as operations occur.
• That's it. Go play!

API used: https://naruto-api.herokuapp.com/api/v1/characters (Credits: https://github.com/Gustavonobreza/naruto-api) 🙌

Interested in DS and algorithms ? Check the awesome work of trekhleb.

Tests were made with Mocha (Chai).

MIT license

Disclaimer: Project is intended to be used for educational/recreational purposes exclusively. Fork the repo and change it accordingly to meet your needs if otherwise.