What did I want to play again?
Can’t decide what game you want to play next? Then allow this JavaScript app to do it. You can enter in whatever games you want to play and then hit “Select Game” to let the app do the choosing for you
Features Include:
- Show list functionality which shows the full list in case you forget what is already in it
- The ability to delete old games once you are done with them
- All data stored in a cookie for quick and easy accessibility
This application was created on my free time and I wanted to put some of my newly learned JavaScript skills to the test. The purpose of the app is to randomly select a game from a list the user creates themselves.
One of the first things I did was create an input for where the user would enter their games. By creating the input field, it would then add the value to an array where all games would be stored. The next thing to focus on was finding a way to save the data. I approached this by creating a cookie for the array, the only problem was that arrays could not be stored in a cookie. To fix this, I used JSON to convert the array, so it could be handed into the cookie. This would lead to the games being saved over multiple sessions.
With the array now being saved, I moved on to displaying its full contents. If a user hadn’t used the app in a long time, they would have maybe forgot what games were in the list. To counter this, I created a function that would loop through all games in the array and display them in the physical app to the user. Once a user was done a game, there had to be a way to remove the game, so it would not be selected again. I added a dropdown that was populated with the cookie’s contents to the user can select and then remove the current game from the array.
The user is now able to add, view and delete games from the list, but there is one important feature left to do, the random selection. To get the selection working, I had the app pick a random number, but it’s not as simple as that. In JavaScript, the random number feature only picks a value between 0 and 1, which doesn’t do any good by itself. I found a way around this by multiplying it by the number of items in the array, once that value is picked, the value is rounded to the nearest whole number and then selects that index from the array.
Things I would like to improve on is the ability to save the data more efficiently. Cookies are very easy to erase and the user could lose everything quickly. I can probably use Angular and Node.js to physical save and read data into separate file, that would keep everything secure.
Want to download the app? You can get it on my GitHub repo.
If you don’t feel like downloading it, you can run it the app here.
Updates:
January 8th, 2021 – Focusing and Other Cosmetics
- Added focus stylings for multiple objects so users know what item they on
- Added randomized quotes for when trying to select a game with an empty list
- Added portfolio link onto the app (for shameless advertising)
February 24th, 2020 – Random List and Mobile Styling
- Random lists can now be generated to display a list of randomly ordered games put in the app
- Random list limit is based on a number input so users can display some or all the games they have put in the app
- Random list section only works if there is at least a game in the app
- More responsible mobile styling has been added so the app will look way nicer on mobile screens
January 20th, 2020 – Enable/Disable
- Added input checking to make sure empty games were not being added
- Game submit button is disabled if the game name field is empty
- The Games List can be toggled on and off
- The Delete Games button is disabled if there are no games to delete