Day 078 - Project 78 : What I've learned from 78 days of code blog site

Code Help 100 Days of Code
1

If you have any questions, comments or issues with this project please post them here!

2

Hi!
While I have completed the challenge for Day78, for some reason the ‘style.css’ file is not being read/loaded (I don’t know the correct term) when I run the ‘main.py’ file. Can someone please help me out with this?
Here is the link to my Day78 Repl: https://replit.com/@Milindh/Day78100Days#main.py

3 
from flask import Flask

contents = {}
for i in range(24):
  if ((i+77)%2==0):
    n = int(i+77)
    contents[n] = {"text": "Hmm. Looks super confusing. Not sure how this will work!"}
  else:
    n = int(i+77)
    contents[n] = {"text": "Hmm think I have got a hang of this. It is working now!"}

app = Flask(__name__)

@app.route('/')
def blankHome():
  page = ""
  return page

@app.route('/<pageNumber>')

def index(pageNumber):
  if (pageNumber == 'favicon.ico' or pageNumber == 'script.js' or pageNumber == 'style.css'): return ""
  tabTitle = f"Day {pageNumber} Reflection"
  heading1 = f"Reflection for Day {pageNumber}"
  heading2 = f"here is the code for Day {pageNumber}"
  n = int(pageNumber)
  text = contents[n]["text"]
  dayLink = f"https://replit.com/@SixftOne-MLH/Day{pageNumber}100Days#main.py"
  page = ""
  f = open("website.html", "r")
  page = f.read()
  f.close()
  page = page.replace("{tab title}", tabTitle)
  page = page.replace("{heading1}", heading1)
  page = page.replace("{heading2}", heading2)
  page = page.replace("{dayLink}", dayLink)
  page = page.replace("{text}", text)
  return page

app.run(host='0.0.0.0', port=81)
4

I used the above code. But it didn’t work. The ‘style.css’ file is not being read.

For more context: Note that the homepage is supposed to be blank. But if you will add any number at the end of homepage URL (for eg see this link: Day 78 Reflection) then a webpage will load up based on the number that you add. So based on the HTML code that I have written, the webpage that loads should read the ‘style.css’ file, but it doesn’t.

5

I did, it works when I tested it

6

For some reason its not working for me.

If I run the code and access this url : Day 78 Reflection - the background color of the website should be black and the font color should be white. But I get the default white background and black font color. Have attached a screenshot also.

Screenshot 2023-02-22 160455
Screenshot 2023-02-22 1604552574×1529 97.6 KB

7

because there are semicolons missing:
image

3 Likes
8

Nope the css file is still not being read. Did it work for you?

I still get the default style, see screenshot below:

Screenshot 2023-02-23 172107
Screenshot 2023-02-23 1721072581×1540 89.8 KB

9

Okay I found the solution.

Originally ‘style.css’ file was in the same/main directory right along with the ‘html’ file and hence the ‘css href’ in the html code was simply “style.css”

But if I create a ‘static’ folder and put the ‘style.css’ file in that folder, and then update the ‘css href’ in the html code to “static/style.css”, then it works!

:thinking: I don’t know the logic behind it, but the css file is being implemented now.

1 Like
10

that’s an interesting find! i reproduced this behavior by moving my css file out of the static folder. you can see what happens when you view the site source code and try to follow the link to the css file: you can’t access it because anything after the URL will be treated as the variable, file names included, unless there is another forwardslash. even then, apparently the static folder has to be named “static” or it’s inaccessible.

2 Likes