Timer in python and html with Flask

Question

I would like to display a timer in my html page. I am using Flask python. I would like to display the animation when you see the seconds are decreasing. I tried the following code without a big success. When I try only the python function, it's working on my terminal but when I want to display it on my HTML page, it's not working anymore and I have the following issue: The browser (or proxy) sent a request that this server could not understand.

Here is my code:

file.py:

from flask import Flask, flash, redirect, render_template, request, session, abort
import time 

app = Flask(__name__)

@app.route("/")
def index():
    value = "bonjour"
    title_html = value
    # function call
    t = request.form['time']
    countdown(int(t))
    return render_template(
    'display.html',message=title_html, time=t)
    

# define the countdown func.
def countdown(t):
    
    while t:
        mins, secs = divmod(t, 60)
        timer = '{:02d}:{:02d}'.format(mins, secs)
        print(timer, end="\r")
        time.sleep(1)
        t -= 1  
        return t
  
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80)

and my html display.html:

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href='/static/main.css'/>
    <!-- <script type=text/javascript src="{{
        url_for('static', filename='js/main.js') }}"></script> -->
    <title>Rotation of the motor</title>
</head>
<body>
    <h1>Hello! Here are some information about your dish:</h1>

    <p>{{message}}</p>
    <p><input type='text' value="{{time}}" name="time">{{time}}</p>
</body>
</html>

I think it would be great if you use javascript rather then this. — imxitiz
– imxitiz, Commented Jul 29, 2021 at 14:49

imxitiz · Accepted Answer · 2021-07-29 14:58:49Z

1

If you want your code to work like this then you have to send requests multiple times. Because if you sent request to server one time then it will stay there for t second and then send response at last. But alternatively you can use javascript in client side which is the best idea, for this kind of things.

answered Jul 29, 2021 at 14:58

imxitiz

4,0253 gold badges14 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

imxitiz Over a year ago

If you want the code in js ask! I may help you.

Camille BOUQUET Over a year ago

Hi, thanks for the answer, I will try in javascript, and I am taking any help!

imxitiz Over a year ago

This solves your problem, right? If it solves don't forget to mark this as accepted answer and if you like my effort then give upvote. :)

imxitiz Over a year ago

I have to write, should I?

Camille BOUQUET Over a year ago

Yes could be nice please!

Collectives™ on Stack Overflow

Timer in python and html with Flask

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related