Taking HTML output and translating to python

Question

I am using flask to create a website. I want to take an input from a slider and then depending on the output from the slider send the website user to a different page. For example if they input 10 into the slider send them to a page specifically designed for 10.

Here is my python code:

#imports flask
from flask import Flask
#Imports templates so we can use html
from flask import render_template
from flask import request
from markupsafe import escape

app = Flask(__name__)

@app.route("/")
def test():
    return render_template('main.html')

@app.route("/slider/")
def Slider():
    return "<p>Slideeeeeeeeeeeee!</p>"

@app.route('/user/<output>')
def show_user_profile(output):
    # show the user profile for that user
    return f'User {escape(output)}'

Here is my HTML code:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: rgb(184, 251, 159);}
body {font-family: 'Century Gothic', monospace;}
h1   {color: rgb(0, 0, 0);}
h1 {font-family: 'Century Gothic', monospace;}
p    {color: rgb(0, 0, 0);}
p {font-family: 'Century Gothic', monospace;}
form    {color: rgb(0, 0, 0);}
form {font-family: 'Century Gothic', monospace;}

</style>
</head>
<body>

<h1>Sprout</h1>

<!--Slider--> 
<div class="slider">
<input type="range" min="0" max="10" value="5" oninput="output.innerText = this.value">
<p id="output">5</p>
</div>


</body>
</html>

The slider part in the HTML is the slider.

I tried just directly calling the output variable in python because they are in the same folder but that doesn't work.

score 0 · Answer 1 · answered Mar 15 '23 at 11:56

Dear below is the solution to your problem:

<!DOCTYPE html>
<html>

<head>
<style>
    body {
        background-color: rgb(184, 251, 159);
    }
    body {
        font-family: 'Century Gothic', monospace;
    }
    h1 {
        color: rgb(0, 0, 0);
    }
    h1 {
        font-family: 'Century Gothic', monospace;
    }
    p {
        color: rgb(0, 0, 0);
    }
    p {
        font-family: 'Century Gothic', monospace;
    }
    form {
        color: rgb(0, 0, 0);
    }
    form {
        font-family: 'Century Gothic', monospace;
    }
</style>
</head>
<body>
<h1>Sprout</h1>
<form method="POST" target="_blank" action="" id="setPageForm" name="setPageForm">
        <input type="range" id="set_page" min="0" max="10" value="5" step="1" name="set_page_value"
            oninput="output.innerHTML=this.value" onchange="setPage(); this.form.submit();">
</form>
<p class="value1" id="output">5</p>
<script>
    function setPage() {
        var element = document.getElementById('set_page');
        var newValue = document.getElementById('set_page').value;
        document.forms.setPageForm.action = '/slider/' + newValue;
    }
</script>

And as far the Flask part is concerned, you have to add number in the path for which you want the page to be displayed as shown below:

@app.route("/slider/2")
def Slider_2():
    return "<p>Slideeeeeeeeeeeee!</p>"

@app.route("/slider/3")
def Slider_3():
    return "<p>Slideeeeeeeeeeeee!</p>"

@app.route("/slider/4")
def Slider_4():
    return "<p>Slideeeeeeeeeeeee!</p>"

and so on.

No doubt there will be better solutions then this approach but this will give you an idea for beginning with Flask.

Taking HTML output and translating to python

1 Answers1