The Idea 💡

The app is a simple “quote generator”, similar to fortune. It will display a different line of text every time you load the page. I wanted to build this for displaying some quotes and catchphrases from my colleagues. From the initial idea to the first prototype took me about 1 hour.

First, make it work

The app in the most basic form consists of two python files: app.py and lines.py.

lines.py provides an array of strings:

lines = [
    "They did not do the needful.",
    "børk børk børk!",
    "lapopm",
    "User could not open cryptic email."
]

app.py contains the Flask app that makes things work. This is the most basic form that will only output a single string without formatting.

from flask import Flask
from lines import lines
import random

app = Flask(__name__)

@app.route("/", methods = ["GET"])
def ohwauw():
    wauw = random.choice(lines)
    return wauw

Then, make it pretty 🦋

The code above results in a rather bland page. Let’s use Flask’s template engine to add some formatting and css.

Here is our template, Flask expects it in templates\template_name.html relative to the app’s root directory.

<!DOCTYPE html>
<html>
    <head>
        <title>Oh Wauw! (tm)</title>
        <style>
            .wauw{
                width: 50%;
                text-align: center;
                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <span class="wauw"><h1>{{wauw}}</h1></span>
    </body>
</html>

Now, we can pass the {{wauw}} parameter to the page:

@app.route("/", methods = ["GET"])
def ohwauw():
    wauw = random.choice(lines)
    return render_template('homepage.html', wauw=wauw)