Click-Go-Lotto | Why I Built This Web App

One of the categories in the navigation panel of my website is My Web Apps. When someone hovers over it a menu drops down and shows three links. The second in the list is Click-Go-Lotto. Why did I create this site? And how did I do it? Continue reading to find out.

Why I Built Click-Go-Lotto

My mom plays the lottery. Specifically the Georgia Lottery. She plays both scratch-off tickets and lottery games like Mega Millions, Powerball, and Fantasty Five to name a few.

LIke many lottery players she has her set of numbers she will play for a particular game over and over. However, there are times she allows the machine to randomly choose her numbers.

Instead of allowing the lottery machine to choose numbers for her, I decided to create a web app that would do the same. And unlike the lottery machine, the app is always up and my mom can generate as many random lottery numbers without purchasing them.

Finally, creating Click-Go-Lotto gave me the chance to use and improve my Python programming skills.

So I brainstormed names for my app, decided on Click-Go-Lotto because people were going to click a button to get the numbers, and finally bought a domain name. FYI: I buy all my domain names from Namecheap, and I highly recommend them to anyone needing domain name registration or web hosting.

Then I worked on the tech stack to get the app up and running. Speaking of that it’s time to explain what tools and frameworks I chose for Click-Go-Lotto.

How I Built Click-Go-Lotto

For the frontend I chose Bootstrap because of its ease of use and its responsive design. For the backend I used Python and Flask. I chose Flask over Django because the former requires much less code to get a simple web app up and running. I have nothing against Django, and I need to take a course about it. However, I would like to learn more about Flask first.

Finally, I host my app on Google Cloud. I use to use Heroku, but the service killed its free tier a couple of years ago. The monthly amount to run the app was too expensive for me. Yes, I pay for Google Cloud, but my monthly bill is under $1.00. I know there are other free IaaS providers out there, but I didn’t want to end up moving providers again if that free tier disappeared.

GitHub Repo

I host all the code for my web app on the public GitHub repo here. Let’s go through it.

main.py and $game.py files

The main.py file reads the data from the file hosting the random numbers depending on which game the user chooses. Then the main.py file runs the function in the game (like cash3.py or powerball.py) file for the particular game to generate the random numbers. Finally, the sends the results to the specific html file for the particular game (like cash3.html or powerball.html):

Here’s a short snippet of the main.py file:

@app.route("/games/cash3.html", methods=["GET", "POST"])
def cash3_game():
    """
    :return: The games/cash3.html page populated with the numbers from the static/files/cash3.py file.
    """
    num1, num2, num3 = cash3()
    return render_template("/games/cash3.html", num1=num1, num2=num2, num3=num3)

@app.route("/games/cash4.html", methods=["GET", "POST"])
def cash4_game():
    """
    :return: The games/cash4.html page populated with the numbers from the static/files/cash4.py file.
    """
    num1, num2, num3, num4 = cash4()
    return render_template("/games/cash4.html", num1=num1, num2=num2, num3=num3, num4=num4)

Here’s the code snippet from the cash3.py file:

import random


def cash3():
    """
    Binds three numbers to random integers. Cash3 allows for duplicate numbers.
    :return: Returns three random numbers to the games/cash3.html page.
    """
    num1 = random.randint(0, 9)
    num2 = random.randint(0, 9)
    num3 = random.randint(0, 9)
    return num1, num2, num3


cash3()

index.html

The index.html file displays the home page from the main.py file onto the website using Flask tags.

$game.html (like cash3.html)

The $game.html file (like cash3.html) displays the random numbers for the Cash 3 lottery game, along with the button to get a new set of random numbers, onto the website using Flask tags. Note: I removed the spacing and formatting from the following code snippet:

<h1 class="game-title">Cash3</h1>
<h2 class="lotto-num-short">{{ num1 }} - {{ num2 }} - {{ num3 }}</h2>
<form action="cash3.html" method="post">
<button class="btn btn-lg game-btn" name="regenerate" type="submit" onclick="{{ num1 }} {{ num2 }} {{ num3 }}">Click-Go-Lotto Again</button>
</form>

I’ve redesigned the website a few times over the years. I just uploaded the latest layout which I’m a big fan of, and probably won’t change for a long time.