Linking html text and other text data to a separate file

Code Help
1

(this is a personal project that I want my fellow friends and classmates to be able to do at school, as I said its a personal project not an assigned school project)I have a repl that’s a string of puzzles and that the user is timed on how fast they can get through them all. I want to be able to save the amount of time and their name which they enter afterwards, in a separate file for me to view when ever and I want them to stay there permanently afterwards unless deleted, I know about flask but I don’t know how to move and edit things to work with flask b/c my pages arnt made to work separately with the html files in a separate folder from the css and js files in another folder. trust me I tried/tested them by putting the html files into a folder separate from the css and js files in another folder. any help or suggestions would be greatly appreciated.

2

You just have to organize the files according to the Flask structure.

/project folder
    /static
        /css
            style.css
        /js
            script.js
    /templates
        index.html
    main.py

After that you just update the paths to CSS and JavaScript files.
Remember that you must reference the directories in the .py file like

from flask import Flask, render_template, request, redirect, url_for, etc
1 Like
3

i sorta understand, the parts that are confusing is first, referencing the directories and then the last one is exactly how to organize the files, i know you gave a basic example but im a bit confused still, also just a thought, is it possible to make a new replit project that I send the data from the first replit that gets the data to the new one

4

You just have to remember that:

Static Files : These are your CSS, JavaScript, and image files. And Flask kinda expects these to be in a folder named static by default.

The same applies to Templates: Flask uses the Jinja2 templating engine to render HTML. So, all HTML files should go into a folder named templates .

To link CSS/JavaScript in your HTML files, you use Flask’s url_for function (this help flask to find the file), for example:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>

Yes, just set up a basic API in the second project to receive data. You can use AJAX/Flask to make the iteration between the two projects.

1 Like
5

Thank you so much, I still have a few clarification questions to ask, first the linking the files would it be like href="{{ url_for(‘static’, filename=‘home_page.css’) like how does it know which one to connect to, also for the separate project would I need to deploy it.

6

This looks under the folder called static, for a file called home_page.css.

1 Like
7

Ok i just wanted to be sure that i didnt have to put the css/style part in there, but going back to my second question i had, would i need to deploy the second project being used as the database.

8

Probably, if not, I’m not too sure how you would do it without it being deployed.
You could make Selenium enter the repl and press the run button for you, but that’s against Replit’s ToS, so I wouldn’t try that option.