Tag: Bootstrap

The tag for Front-End Developments posts about Bootstrap toolkit.

Where Should I Go Eat: An Introduction
The last of my technical projects I haven’t talked about yet is Where Should I Go Eat (which you can visit here). In this post I will discuss the following topics about this web application:
- Why I created it
- The code running it
- My future plans for the web application
Why I Created Where Should I Go Eat

This story is similar to my story for creating Black History Fact Generator: The year was 2019. I worked at Twitter as a Site Operations Technician at the Atlanta, GA data center. The year prior I taught myself the Python programming language using an Udemy course, and I found myself wanting to create more projects to increase that skill.

Since I worked at the data center and not an actual Twitter office, the company provided a catered Monday through Thursday. Every Friday we had the opportunity to spend our daily lunch budget ($19 at the time) on our own. We could order lunch via Doordash or go out to eat. Usually, we chose the former because lunchtime traffic in Downtown Atlanta sucks.

My team always fought about which restaurant to order from. Some people wanted fast food like Chick-fil-A. Others wanted to eat from the newest hip restaurant. We would argue back and forth in the Slack channel dedicated to our lunch order.

One day I made a joke that I should build an app that chose a restaurant at random for us. That got a few laughs, and one of the Site Reliability Engineers (SREs) on my team told me to do just that. He knew I taught myself Python and that project would get me to flex those skills. So that’s what I did.

I brainstormed names for my app, decided on Where Should I Go Eat, and bought a domain name from Namecheap.

The Code Running Where Should I Go Eat

All the code can be found on the project’s GitHub repo.

Front-End Code

I used Bootstrap to build out the Front-End of the website because of the following reasons:
- Ease to use
- Rich responsive website design features
- Offers good performance
In addition to Bootstrap I use regular (or vanilla) HTML and CSS to build out the Front-End.

Back-End Code

I used Python and Flask to build out the Back-end of the website. I chose to use Flask over Django because it requires much less code to spin up a simple application.

The Python code to randomly choose a restaurant is in the main.py file. I’ll include a snippet of that file below:
```
with open("static/files/restaurants.txt", "r") as restaurants:
        restaurant_list: [str] = restaurants.readlines()

    # Choose a random restaurant
    random_restaurant: [str] = random.choice(restaurant_list)

    # Strip the newline character from the end so the search is successful
    random_restaurant: [str] = random_restaurant.strip()

    # Initializing variable
    found_restaurant_url: str = ""

    # Search the nested tuples for the correct restaurant URLs matching the chosen random restaurant
    for restaurant in restaurant_urls:
        if random_restaurant in restaurant:
            found_restaurant_url: str = restaurant[1]
```
Let’s go through the code line by line:
1. I have all the restaurants in a text file called restaurants.txt. Using the “with open” command I read all the names into a list called “restaurant_list.”
2. Then I use the “random.choice” function to choose a random restaurant from the “restaurant_list” list.
3. After that I strip the newline character from the end of the “random_restaurant” so when I search for it, the exact match appears.
4. I initialize a variable to hold the “random_restaurant” URL.
5. Finally, I use a “for” loop to search through the tuple containing the restaurants and their URLs in the “restaurants_urls.py” file, and assign the one matching the “random_restaurant.”
The main.py file contains all the route (or links) to the home page, which displays the random restaurant and its URL.

I include the restaurant on the home page template as so:
```
<div class="col">
            <button class="button" name="start-over" type="submit" onclick="location.href=location.href">Reset</button>
        </div>
        <p class="restaurant-result">You Should
            Go Eat At {{ restaurant }}</p>
        <p class="restaurant-link">Order Online At {{ restaurant }} <a href="{{ restaurant_link }}"
                                                                       target="_blank">here</a></p>
    </div>
</div>
```
If users wants to generate another random restaurant they click the button on screen, which runs the function again.

My Future Plans For This Application

I had some plans to use geolocation to provide restaurants available in that visitor’s location, but I haven’t worked on that feature. I may in the future.
01/10/2025
Click-Go-Lotto: An Introduction
One of my technical projects I updated recently is Click-Go-Lotto (which you can visit here). In this post I will discuss the following topics about this web application:
- Why I created it
- The code running it
- My future plans for the web application
Why I Created Click-Go-Lotto

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

Like many lottery players she has her a set of favorite numbers to play for particular games 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 could do the same. A benefit of a web app over a lottery machine is that she can generate as many random numbers as she wants without paying for them. My mom could use the app on her phone if she’s on the go, or on her laptop when she’s at home.

After brainstorming names for my app, I picked Click-Go-Lotto because users would click a button on the website to get the numbers. After coming up with the name I bought the domain name from Namecheap.

With the domain name in hand, it was time to design the web application. I already knew what tech stack I wanted to use: Bootstrap for the Front-End and Python/Flask for the Back-End.

The Code Running Click-Go-Lotto

All the code can be found on the project’s GitHub repo.

Front-End Code

I used Bootstrap to build out the Front-End of the website because of the following reasons:
- Ease to use
- Rich responsive website design features
- Offers good performance
In addition to Bootstrap I use regular (or vanilla) HTML and CSS to build out the Front-End.

Back-End Code

I used Python and Flask to build out the Back-end of the website. I chose to use Flask over Django because it requires much less code to spin up a simple application.

The Python code to generate the random numbers is all in one module: games.py. I’ll include a snippet of that file below:
```
def cash3() -> tuple[int, int, int]:
    """This function provides the three numbers for the Cash 3 game.
    The game allows for numbers 0 to 9, and also allows for duplicate numbers.
    :return: Three individual random integers.
    """
    num1: int = random.randint(0, 9)
    num2: int = random.randint(0, 9)
    num3: int = random.randint(0, 9)
    return num1, num2, num3

...

def mega_millions() -> tuple[int, int, int, int, int, int]:
    """This function provides the six numbers for the Mega Millions game.
    The game allows for numbers 1 to 60, but doesn't allow for duplicate numbers except for the Mega Ball.
    :return: Six individual random integers.
    """
    num1: int = random.randint(1, 13)
    num2: int = random.randint(14, 26)
    num3: int = random.randint(27, 39)
    num4: int = random.randint(40, 52)
    num5: int = random.randint(53, 70)
    mega_ball: int = random.randint(1, 25)
    return num1, num2, num3, num4, num5, mega_ball
```
Let’s go through the code line by line:
1. The function returns a tuple of Integers. The number of Integers range from three to six.
2. Depending on the game, I either allow duplicate random numbers or use a range of random numbers to prevent duplicates.
3. Each random number is assigned to a different variable.
4. If the game has a specific lottery ball (like the Mega Ball in the previous code snippet) I assign a different random number to that variable.
5. Finally, I return all the Integers from the function.
6. The main.py file displays the numbers returned from the function:
```
@app.route("/games/cash3.html", methods=["GET", "POST"])
def cash3_game() -> render_template:
    """Displays the cash3.html template.
    :return: Cash 3 page displaying the three random numbers.
    """
    num1, num2, num3 = cash3()
    return render_template("/games/cash3.html", num1=num1, num2=num2, num3=num3)

...

@app.route("/games/mega-millions.html", methods=["GET", "POST"])
def mega_millions_game() -> render_template:
    """Displays the mega-millions.html template.
    :return: Mega Millions page displaying the six random numbers.
    """
    num1, num2, num3, num4, num5, mega = mega_millions()
    return render_template("/games/mega-millions.html", num1=num1, num2=num2, num3=num3, num4=num4, num5=num5,
                           mega=mega)
```
The main.py file contains all the routes (or links) to the specific game’s page. This is the Flask code hard at work!

I include the numbers on the game’s page template as so:
```
...

<div class="container game-container">
    <div class="row">
      <div class="col">
        <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>
      </div>
    </div>
  </div>

...
```
If users wants to generate a new set of numbers they click the button on screen, which runs the specific function again.

My Future Plans For This Application

I don’t have any major plans to modify the code for Click-Go-Lotto. It’s pretty much complete, unless a lottery game changes.
01/08/2025
Quick Black History Facts: An Introduction
One of my technical projects I updated recently is Quick Black History Facts (which you can visit here). In this post I will discuss the following topics about this web application:
1. Why I created it
2. The code running it
3. My future plans for the web application
Why I Created Quick Black History Facts

The reason why I created this web application starts in 2018. That year I taught myself the Python programming language from a course on Udemy. Then in 2019 I improved my Python skills by creating more projects. One of those projects was Quick Black History Facts (which was formally called Black History Facts Generator). February was fast-approaching and it was time again for me to celebrate Black History Month.

During that month I would tweet random facts on my Twitter account, but that’s time-consuming. This manual process is perfect for a computer program, and I thought about creating one to connect to the Twitter API. That way the random fact would tweet out automatically. Thus, I started devising my plan.

The Plan’s Objective Changes

As I worked on this project further, the objective of what I wanted to accomplish changed. It changed because my programming skill-set to use the Twitter API was not strong enough. Frankly, I was out of my depth. So I pivoted to building a website to display the facts because I was familiar in website design.

The Code Running Quick Black History Facts

All the code can be found on the project’s GitHub repo.

Front-End Code

I used Bootstrap to build out the Front-End of the website because of the following reasons:
- Ease to use
- Rich responsive website design features
- Offers good performance
In addition to Bootstrap I use regular (or vanilla) HTML and CSS to build out the Front-End.

Back-End Code

I used Python and Flask to build out the Back-end of the website. I chose to use Flask over Django because it requires much less code to spin up a simple application.

The Python code to display the random fact on the screen is in these three lines of code:
```
with open("static/files/black_history_facts.txt", "r") as facts:
    fact_list = facts.readlines()
return render_template('index.html', black_history_fact=random.choice(fact_list))
```
Let’s go through the code line by line:
1. All the facts are in a text file delimited with a newline at the end of each sentence.
2. Using “with open” to open that file as read-only and read the contents using a loop.
3. The loop iterates over each individual line in the text file with the “readlines” Python built-in function.
4. A list stores each individual fact.
5. Using Flask’s “render_template” function and Python’s built-in function “random.choice” a random fact from the list displays on the screen.
My Future Plans For This Application

I don’t have any major plans to modify the code for Quick Black History Facts. My only plan is to add more Black History facts to the text file. I’ll start doing that in January 2025.
12/02/2024