The Lotto Number Generator, Part 2
Doing More with a Simple Random Number Generator
So, my first project seems to be going without a snag. Think it should be easy to do adapt a lotto number generator to run multiple games at once, right?
…
Wow, that’s a lot of crickets chirping.
To be honest, the logic behind getting it to run multiple games wasn’t as difficult. I just had to adapt the current code to run variables to take account for different number pools, bonus balls, and starting numbers (1 or 0 usually). I also had to allow games that allowed duplicate numbers. This seemed like a great place to introduce objects… and that’s where I ran into problems…
Creating the Objects
The Texas Lottery system includes eight games, including the two major multi-state games PowerBall and Mega Millions. To account for the different formats between games, I decided to create an object that would hold the format of all of them. I chose three games specifically as guinea pigs, Lotto Texas, PowerBall, and Pick 3.
An object is a list of properties, each one custom identified. Each object within the object variable is surrounded by curly brackets (‘{}’ and separates each property by commas. A single object looks like as follows.
const game = {name: “Lotto Texas”, balls: 6, numbers: 54, start: 1, duplicate: false, bonusBall: false}
Just like any other variable, you can also make the object an array of multiple objects. Adding in the other games shows up like this.
const game = [{name: “Lotto Texas”, balls: 6, numbers: 54, start: 1, duplicate: false, bonusBall: false}, {name: “Pick 3”, balls: 3, numbers: 10, start: 0, duplicate: true, bonusBall: false}, {name: “PowerBall”, balls: 5, numbers: 69, start: 1, duplicate: false, bonusBall: true, bonusNumbers: 26}]
PowerBall has a separate number pool for its bonus ball, so I had to set up its pool.
To call on a value within an object, you use the variable of the objectName.propertyName. So to call on the number of lotto balls drawn just uses the variable game.balls.
Adapting the Code
Now, I just had to adapt the existing code to allow for all these differences. With the game object set as a global variable, I thought this would be easier than it was. Apparently, my logic was sound, but ran into issues with how I was calling the objects values. Either way, I set the lottoBall() function to accept two variables (numbers and start), so the name looks like “lottoBall(numbers, start)”. I changed the code to return Math.floor(Math.random() * numbers) + start, which allows for any game’s number pool to be used.
Also in the getResults() functions, I had to add an if-else statement to deterimine whether the game allowed duplicate numbers or not. If it did, I looped through the lottoBall() function directly. If not, I had to include the duplicateCheck() function. I also added a separate if statement checking for the bonus ball and sending the bonusNumbers property to the lottoBall() function. However, nothing was returning properly.
I Could Use Some Help Here
This caused some frustration as I searched Google and including Stack Overflow for the answer to my problem. When I couldn’t find the answer searching Stack Overflow directly, I finally set up my own account on the site to ask around myself.
Thanks to the user vin_it, I was able to figure it out and had to change a lot of variables and code around to get the code to work properly. It didn’t help that I was misusing the forEach method of going through an array. I eventually set up two arrays, one for the main draws and one for the bonus balls, to store multiple arrays for each game.
Setting up the Display
Now, that I could get the random number generator to put in the right numbers in the right places, I had to get all the numbers to display. Back to more DOM work.
I set up loops to produce div elements that would store one number each, each loop based on the number of draws allowed each game. For the bonus balls, I had to add a little CSS to have those numbers come up red temporarily.
Then, I had set up a button to refresh all the games at once. Basically, the code just erased the HTML and reran the script to load up all the new random numbers.
Making the Page Look Good
Time for more CSS magic. I decided to set up the page with a blue background and have the numbers show up inside circles as if they were part of the circle itself. Most balls had bold black text inside a white circle, while the bonus balls had bold white text inside a red circle. I used a flex box to keep all the numbers in line and separated enough to look neat.
At this point, I also made sure each result was arranged using flexbox and spaced enough to be read cleanly. I also added the remaining games to the object, so now all eight of the Texas Lottery games appear.
And at this point, the page is complete, for now. I could decide to come back and add refresh buttons for individual games or have it work for the lottery systems of other states. If there’s some sort of feature that can be added, why not respond below?
My next project for now, I’m taking a look at setting up a to-do app.
…
Too boring? Okay, how about I convert it into a Goal Tracker instead? Now, that’s more like it.
I’m also a veteran scrub of Magic the Gathering. I’m considering building a guided deck building app based on the Rule of Nine created by Dan Eckstein about ten years ago, which he even refined into skeletons based on which type of deck you build.