Question:
How do I view my index.html file when using flask from the Flask template on replit?
I have a main.py file with my flask/Python stuff; and a templates folder with my index.html file, htlm code, and the stuff to use the flask template.
Am I supposed to use the ‘HTML, CSS, JS’ template?
My project directory looks something like this
|-- templates/
|-- index.html
|-- flask.py
main.py
My main.py folder holds this content
from flask import Flask, render_template
app = Flask(__name__)
responses = []
@app.route("/")
def index():
return render_template("index.html", responses=responses)
# Start of meta setup - head #
# Imports - to be used later in the program #
import datetime
import random
import sys
import time
# This portion makes it possible for a delay between print statements #
def delay(seconds):
start_time = datetime.datetime.now()
while (datetime.datetime.now() - start_time).total_seconds() < seconds:
pass
###
# "*" indicates code
# Example Usage of random:
#
# The below makes "operator" randomly '+', '-', '*', or '/' when printed
# * operator = random.choice(['+', '-', '*', '/']) *
#
# This one randomly chooses a number between 1-100 when printed
# * random_number1 = random.randint(1, 100) *
###
# End of meta setup #
# Start of display content - body #
while True:
username = input("What is your name?\n").strip()
# Split the input into words and assign to variables #
name_parts = username.split()
if len(name_parts) == 3:
firstname = name_parts[0]
lastname = name_parts[1]
MN = name_parts[2]
elif len(name_parts) == 2:
firstname = name_parts[0]
lastname = name_parts[1]
elif len(name_parts) == 1:
firstname = name_parts[0]
else:
# Handle cases where too many words are provided #
print(
"Hey, please only enter either your name in the format of either;"
" firstname, first and last, or first last middle"
)
continue # This will restart the loop
break
#
OCName = input("What is the name of your OC?\n").strip()
print("\nOkay, " + firstname + "! Your character's name is " + OCName + "!\n")
delay(1)
while True:
# Story Choices #
storytype = input(
"You have some choices for your type of story. 'Adventure through the"
" rainforest' or 'Quest for a Magical Artifact'\n"
).strip()
########## Adventure through the rainforest Storyline ##########
if (
storytype.lower() == "adventure through the rainforest"
or storytype.lower() == "rainforest"
or storytype.lower() == "the rainforest"
or storytype.lower() == "adventure"
):
print("Great choice")
delay(1)
break
########## End of Adventure through the rainforest Storyline ##########
########## Quest for a Magical Artifact Storyline ##########
if (
storytype.lower() == "quest for a magical artifact"
or storytype.lower() == "magical artifact"
or storytype.lower() == "quest"
or storytype.lower() == "artifact"
):
text_to_type = (
"Due to technical difficulties, 'Quest for a Magical Artifact' has been"
" temporarilly disabled\n\n"
)
for char in text_to_type:
sys.stdout.write(char)
sys.stdout.flush()
time.sleep(0.025)
continue
########## End of Quest for a Magical Artifact Storyline ##########
# End of Story Choices #
# Handel inccorect inputs for type of story (storytype) #
else:
print("\nInncorrect input.")
delay(1)
print(
"\nAccepted inputs for 'Quest for a Magical Artifact': 'quest for a magical"
" artifact', 'magical artifact', 'quest', and 'artifact'\nAccepted inputs"
" for 'Adventure through the rainforest': 'adventure through the"
" rainforest', 'rainforest', 'the rainforest', and 'adventure'\n"
)
continue
text_to_type = (
"That's all that's made for now. Thanks for playing!\n\
To get permission to use the"
" 'I completed the Wings of Fire Interactive Story!' badge, submit a screenshot of"
" this (your entire screen) to User:Moonwatcher x Qibli"
)
for char in text_to_type:
sys.stdout.write(char)
sys.stdout.flush()
time.sleep(0.025)
if __name__ == "__main__":
app.run(debug=True)
app.run(host="0.0.0.0", port=81)
index.html
My index.html file holds this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responses</title>
</head>
<body>
<h1>User Responses</h1>
<ul>
{% for response in responses %}
<li>{{ response }}</li>
{% endfor %}
</ul>
</body>
</html>