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 first in the list is Black History Fact Generator. Why did I create this site? And how did I do it? Continue reading to find out.
Why I Built Black History Fact Generator
The year was 2019. I worked at Twitter as a Site Operations Technician. 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.
February was coming up and I was going to tweet random Black History facts to celebrate Black History Month through my Twitter account. However, tweeting out a random fact daily was too time-consuming. I knew I could create an application to do that for me using the Twitter API. Thus, that inspiration started a new project!
Well, as many people who start a coding project knows one’s objectives change as work progresses.
As I wrote the code, I decided to create a website for my random fact generator instead of creating a program to connect to my Twitter profile. The main reason for the change was to open the app to a wider audience. At the time I didn’t have many followers. I still don’t, but I’m working on that.
So I brainstormed names for my app, decided on Black History Fact Generator, 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 Black History Fact Generator.
How I Built Black History Fact Generator
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
The main.py file reads the data from the file hosting the random facts, randomly chooses one using a built-in function, and sends it on the index.html file:
@app.route("/", methods=["GET", "POST"])
def main():
"""
Opens and reads the files/bhfg_facts.txt file, loops over the entire file to read each line, collects all the
lines as a list, and then randomly chooses a fact to display on index.html.
:return: Display a random Black History fact to the home.html page.
"""
with open("static/files/fact_list.txt", "r") as facts:
fact_list = facts.readlines()
return render_template('index.html', black_history_fact=random.choice(fact_list))fact_list.txt
This text file contains all the Black History facts. Here’s a short preview of the contents:
Black History Month began as "Negro History Week," which was created in 1926 by Carter G. Woodson.
Black History Month became a month-long event in 1976.
The month of February was chosen for Black History Month to coincide with the birthdays of Frederick Douglass and Abraham Lincoln.
The National Association for the Advancement of Colored People (NAACP) was formed in 1908 by a group of African-American leaders.
Jack Johnson became the first black man to hold the World Heavyweight Champion boxing title in 1908. He held on to the belt until 1915.
John Mercer Langston was the first black man to become a lawyer in Ohio when he passed the Bar in 1854.
John Mercer Langston was elected to the post of Town Clerk for Brownhelm, Ohio in 1855 and became one of the first black people elected to public office in America.
Thurgood Marshall was the first black person ever appointed to the United States Supreme Court. He served from 1967 to 1991.index.html
Finally, the index.html file displays the results of the function from the main.py file onto the website using Flask tags. Note: I removed the spacing and formatting from the following code snippet:
<div class="container site-container">
<div class="row">
<div class="intro-div">
<h1 class="title">Black History Fact Generator</h1>
<p class="description">Displays a new fact every 10 seconds</p>
</div>
<div class="fact-div">
<h2 class="fact">{{ black_history_fact }}</h2>
</div>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.