All solutions

I want to maintain the sequence of the items on the list in my todo-app but since the data is fetched from the backend which has its own way or ordering the list, the items are reordered when the page is refreshed.

My guess is I can have another integral list with the sole purpose of remembering the order but if someone can tell me of a better way, let me know.

Two things; 1) Managing multiple CSS/ JS files for different HTML files is quite difficult and I need to find a more scalable way to approach this problem. 2) Speed. The fetching and loading takes a considerable amount of time which I need to find a way to reduce. The images, the filtering and the querying are the major culprits. My best guess is to take all the data from the API and store it as a local object or in a custom asset folder which will be updated every now and then.

Animating shadows is generally not advised but I had no other choice since shadows on my ::after pseudo element weren't visible. If I set the shadow to inset then it would work but not otherwise. My best guess is maybe it had something to do with the stacking context.