Some people can recall dozens of phone numbers from memory. Some can even define hundreds of function definitions from several different developer languages. I am not one of those people. In a recent Javascript bootcamp, I was reminded of this fact. As the class reviewed many function names that I vaguely remembered, I kept thinking, “I need to set up some flashcards”. Flashcards have always helped me with recall.

In a past job, to liven up our typically boring team meetings, I put together a very basic flashcard game (in a layout similar to the popular game Jeopardy) and populated it with questions related to our teams workload. With everyone logged into Webex, as each flashcard was displayed, it was great fun to see everyone frantically typing to be the first to answer correctly in the chat.

The meeting was a success, but that basic game which used static Bootstrap modal boxes only contained the few questions prepared for that meeting. I often thought of building something that could be used repeatedly online. A bootcamp that I’m in (courtesy of Amazon) had a JavaScript project that seemed to be a good fit for a more dynamic version of that game.

A brief demo video of the resulting app and the project requirements are listed below. If this app seems like something you or your team might enjoy, you can find the live version at https://5-5s.com/flashcards/. For those curious, you can check out the repo here. There’s also an instructions page for how you might use it in a virtual meeting.

Please note, the requirements did not include persisting changes in a database. If you refresh the browser mid-game, the current game will be replaced by a brand new game with new questions. A next version of this app may try to address this. Another future possibility would be to add a form to allow users to create their own questions, but since this version satisfies the project requirements, it will have to do for now. Enjoy!

 

 

Project Requirements

• Single Page App (SPA) (single HTML file)
• HTML/CSS/JS frontend accesses data from a public API or db.json/json-server.
• returning a collection of at least 5 objects, each w/ at least 3 attributes.
• Interactions should be asynchronous (fetch) using JSON format.
• Min. 2 event listener types (click, load, change, etc) w/ callback function
• Min. 1 array iteration (map, forEach, filter, etc)
• Github repo w/ readme.md min 30 commits