I am trying to create a vocabulary building application where a set of words are appear as flash cards with definition and you can choose the following options: practice if you wish to see the word over and over, mastered if you know what it means and don’t want to see it again. These flash cards are generated at random from the word bank stored in the server.
Once you click on practice or mastered, the word along with the status is stored using indexeddb in the user’s machine without affecting the server in any way.
I have set up a controller that fetches random words along with their meanings when you click on a link.
I also have a page that displays three categories: practice, mastered and unvisited.
If someone clicks on unvisited, my controller will work fine.
If someone clicks on mastered or practice, I want them to be able to see only those words that fall under that category.
I can think of the following option:
- Get the status of the word from the url.
- Scan the indexeddb to find all words with that status.
- Store it in an array and randomly choose an element on clicking the next button.
It looks terribly long-winded. Can anyone offer a better solution?
Also, I have been using vanilla javascript on the front end. Should I use react or vue?