Programming

Black History Facts Generator: My Python Web App

black history facts generator screenshot

On the side of my blog contains my Twitter feed but it also contains links to my other projects, including Black History Facts Generator, my Python web app. Today I want to explain why I created this app and display the code running it.

Here’s Why I Created Black History Facts Generator

I got the idea for my Black History Facts Generator back in 2018 while browsing Twitter during Black History Month. I wanted to tweet out a different fact automatically instead of the manual way I was doing it. That led me to investigate into the Twitter API and I soon saw I needed to write some code. However, I didn’t have the knowledge to do so at that time.

Black History Facts Generator Code Development

Fast forward to 2019 and I’m learning Python. I finally had the knowledge to create the first version of the Black History Facts Generator which ran in the console or locally on a computer through a Python interpreter. It took me several more months before I created the web app version when I learned Django.

I didn’t like Django because it was too complex for my needs. That led me to Flask and that framework worked perfectly! Maybe I’ll write in detail why I enjoy using Flask but I will say that because of its simplistic nature it’s very good to use for small projects. It even works for large projects and/or websites too because at my former employer we used it.

After doing a bunch of local development and testing I bought the domain name for the website and bought hosting through Python Anywhere.

Now The Good Part: The Code!

So now let’s talk about the code running the web app.

The front-end is created in Bootstrap. As you can see from the code below there isn’t much displayed because I wanted to put the focus on the facts displaying on the screen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="This website automatically displays a random Black History fact every ten seconds.">
  <meta http-equiv="refresh" content="10">
  <link rel="apple-touch-icon" sizes="180x180" href="https://www.bhfgen.com/static/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://www.bhfgen.com/static/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://www.bhfgen.com/static/favicon/favicon-16x16.png">
  <link rel="manifest" href="https://www.bhfgen.com/static/favicon/site.webmanifest">
  <link rel="mask-icon" href="https://www.bhfgen.com/static/favicon/safari-pinned-tab.svg" color="#000000">
  <link rel="shortcut icon" href="https://www.bhfgen.com/static/favicon/favicon.ico">
  <meta name="msapplication-TileColor" content="#2b5797">
  <meta name="msapplication-config" content="https://www.bhfgen.com/static/favicon/browserconfig.xml">
  <meta name="theme-color" content="#000000">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="../static/css/normalize.css">
  <link rel="stylesheet" href="../static/css/index.css">
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Indie+Flower&family=Raleway&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/7cebd9718b.js" crossorigin="anonymous"></script>
  <title>Black History Facts Generator</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="intro">
        <h1>Black History Facts Generator</h1>
        <h6>This website automatically refreshes every 10 seconds.</h6>
      </div>

      <div class="facts">
        <h3>Black History Fact: {{ black_history_fact }}</h3>
      </div>

      <div class="social-media">
        <p>Created by Brittany Gates</p>
        <a href="https://www.brittanygates.me" title="My Blog" target="_blank">My Blog</a> -
        <a href="https://brittbot.com/" title="All About Website Creation" target="_blank">Brittbot</a> -
        <a href="https://www.linkedin.com/in/brittanygates/" title="My LinkedIn Profile" target="_blank"><i class="fab fa-linkedin-in"></i></a> -
        <a href="https://twitter.com/bgates_writer" title="My Personal Twitter Profile" target="_blank"><i class="fab fa-twitter"></i></a> -
        <a href="https://twitter.com/brittbot_bgates" title="Brittbot Twitter Profile" target="_blank"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
  </div>

  <!-- JS, Popper.js, and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

Finally, I have the site refresh itself every 10 seconds for a new fact to display. This way a person can display this on a screen in a lobby or classroom and don’t have to interact with it.

As for the Python code, here it is:

"""
Title: Black History Facts Generator
Creator: Brittany Gates (https://github.com/bcgates82/ | https://twitter.com/bgates_writer)
About: In celebration of Black History Month I've created a random Black History Facts generator.
Fact Sources:
http://www.history.com/topics/black-history/black-history-facts
http://www.history.com/topics/black-history/black-history-milestones
http://www.history.com/topics/black-history/booker-t-washington
http://www.history.com/topics/black-history/george-washington-carver
https://en.wikipedia.org/wiki/W._E._B._Du_Bois
"""

from flask import Flask, render_template
import random

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def index():
    """
    This function opens and reads the bhfg_facts.txt file which is located in the Static (/static/) directory.
    Then a loop runs over the entire file, reading each line. The loop collects all the lines as a list, and then
    pulls out one fact randomly using the random.choice function.

    :return: The function returns a random Black History Fact to the home.html template, which displays it on the
    website.
    """

    with open('static/files/bhfg_facts.txt', 'r') as facts:
        fact_list = facts.readlines()
    return render_template('index.html', black_history_fact=random.choice(fact_list))

The contents of the text file referenced in the code contains a line or lines of text for each fact separated by a newline.


Thanks for reading this post and visiting Brittbot. Bookmark this website to stay current on the latest website services and to improve your business’ website.

0 0 votes
Article Rating
Share My Post!
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments