How to fix my code?

Glitch Help
1

This is a Flask webpage, and in the home page, when I press the Go to Vehicle Comparison button there is a Not found error.

main.py code with all the routes:
from flask import Flask, request, render_template
import secrets
import os

app = Flask(name)
app.secret_key = secrets.token_hex(16)

Electric Vehicle Data

electric_data = {
“Tesla Model Y”: {“PDSF”: 46990, “Coût de l’électricité”: 0.13, “Distance/an”: 24000, “Maintien et repair ($)”: 5173, “Coût de l’assurance”: 7400, “Autres coûts”: 16510, “Total après 5 ans($)”: 76541, “Économie de carburant EPA”: “”, “Sauver ou dépenser?”: “Sauver 5 750$”, “Pétrolium”: “0 barils”, “Émissions”: “0 grammes”},
“Tesla Model 3”: {“PDSF”: 35000, “Coût de l’électricité”: 0.13, “Distance/an”: 24000, “Maintien et repair ($)”: 4213, “Coût de l’assurance”: 7400, “Autres coûts”: 17986, “Total après 5 ans($)”: 67939, “Économie de carburant EPA”: “289 (303 / 273)”, “Sauver ou dépenser?”: “Sauver 6000$”, “Pétrolium”: “0 barils”, “Émissions”: “0 grammes”},
“Ford Mustang Mach-E”: {“PDSF”: 42995, “Coût de l’électricité”: 0.13, “Distance/an”: 24000, “Maintien et repair ($)”: 4663, “Coût de l’assurance”: 5633, “Autres coûts”: 11807, “Total après 5 ans($)”: 67438, “Économie de carburant EPA”: “266 (278 / 252)”, “Sauver ou dépenser?”: “Sauver 4750$”, “Pétrolium”: “0 barils”, “Émissions”: “0 grammes”},
“Tesla Model X”: {“PDSF”: 101380, “Coût de l’électricité”: 0.13, “Distance/an”: 24000, “Maintien et repair ($)”: 4935, “Coût de l’assurance”: 7759, “Autres coûts”: 42018, “Total après 5 ans($)”: 158522, “Économie de carburant EPA”: “219 (233 / 202)”, “Sauver ou dépenser?”: “Sauver 5500$”, “Pétrolium”: “0 barils”, “Émissions”: “0 grammes”},
“Tesla Model S”: {“PDSF”: 89990, “Coût de l’électricité”: 0.13, “Distance/an”: 24000, “Maintien et repair ($)”: 4705, “Coût de l’assurance”: 7759, “Autres coûts”: 31970, “Total après 5 ans($)”: 136764, “Économie de carburant EPA”: “240 (252 / 228)”, “Sauver ou dépenser?”: “Sauver 6000$”, “Pétrolium”: “0 barils”, “Émissions”: “0 grammes”},
“Chevrolet Bolt EUV”: {“PDSF”: 27800, “Coût de l’électricité”: 0.13, “Distance/an”: 24000, “Maintien et repair ($)”: 3527, “Coût de l’assurance”: 4832, “Autres coûts”: 10520, “Total après 5 ans($)”: 48551, “Économie de carburant EPA”: “282 (292 / 270)”, “Sauver ou dépenser?”: “Sauver 6000$”, “Pétrolium”: “0 barils”, “Émissions”: “0 grammes”},
}

Gas Vehicle Data

gas_data = {
“Ford F-150”: {“PDSF”: 33695, “Coût du gaz”: 1.4, “Distance/an”: 24000, “Maintien et repair”: 6129, “Coût de l’assurance”: 4364, “Autres coûts”: 17019, “Total après 5 ans ($)”: 78277, “Économie de carburant”: “49 (42 / 56)”, “Sauver ou dépenser?”: “Dépenser 3250$”, “Pétrolium”: “3.75 barils”, “Émissions”: “267 grammes”},
“Chevrolet Silverado”: {“PDSF”: 40500, “Coût du gaz”: 1.4, “Distance/an”: 24000, “Maintien et repair”: 3916, “Coût de l’assurance”: 4804, “Autres coûts”: 15973, “Total après 5 ans ($)”: 81973, “Économie de carburant”: “47 (45 / 49)”, “Sauver ou dépenser?”: “Dépenser 3750$”, “Pétrolium”: “3.94 barils”, “Émissions”: “277 grammes”},
“Ram Pickup”: {“PDSF”: 36820, “Coût du gaz”: 1.4, “Distance/an”: 24000, “Maintien et repair”: 4659, “Coût de l’assurance”: 4740, “Autres coûts”: 15991, “Total après 5 ans ($)”: 79010, “Économie de carburant”: “40 (35 / 52)”, “Sauver ou dépenser?”: “Dépenser 3750$”, “Pétrolium”: “3.94 barils”, “Émissions”: “277 grammes”},
“Toyota RAV-4”: {“PDSF”: 27575, “Coût du gaz”: 1.4, “Distance/an”: 24000, “Maintien et repair”: 5490, “Coût de l’assurance”: 4160, “Autres coûts”: 9913, “Total après 5 ans ($)”: 62530, “Économie de carburant”: “71 (64 / 80)”, “Sauver ou dépenser?”: “Sauver 250$”, “Pétrolium”: “2.72 barils”, “Émissions”: “190 grammes”},
# … (the rest of the gas vehicle data)
}

@app.route(‘/’)
def home():
return render_template(‘home.html’)

@app.route(‘/compare-vehicles’, methods=[‘POST’])
def compare_vehicles():
selected_electric_vehicle = request.form.get(‘electric_vehicle’)
selected_gas_vehicle = request.form.get(‘gas_vehicle’)

selected_electric_data = electric_data.get(selected_electric_vehicle, {})
selected_gas_data = gas_data.get(selected_gas_vehicle, {})

return render_template('comparison.html', electric_data=electric_data, gas_data=gas_data,
                       selected_electric_data=selected_electric_data, selected_gas_data=selected_gas_data)

@app.route(‘/input-own-data’, methods=[‘GET’, ‘POST’])
def input_own_data():
if request.method == ‘POST’:
# Handle the form submission here
# Retrieve form data
distance_per_year = float(request.form.get(‘distance-per-year’))
cost_of_electricity = float(request.form.get(‘cost-of-electricity’))
cost_of_gas = float(request.form.get(‘cost-of-gas’))
num_of_years = int(request.form.get(‘num-of-years’))

    # Perform calculations or other processing with the form data
    # For example, you can calculate total costs and pass them to the template
    total_cost_electric = distance_per_year * cost_of_electricity * num_of_years
    total_cost_gas = distance_per_year * cost_of_gas * num_of_years

    return render_template('input.html', total_cost_electric=total_cost_electric, total_cost_gas=total_cost_gas)

return render_template('input.html')

if name == ‘main’:
app.run(host=‘0.0.0.0’, port=int(os.environ.get(‘PORT’, 8080)), debug=True)

comparison.html

Vehicle Comparison body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } 
    header {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 1em 0;
    }

    section {
        max-width: 800px;
        margin: 20px auto;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    form {
        text-align: left;
        margin-bottom: 20px;
    }

    label {
        display: block;
        margin-bottom: 10px;
    }

    select {
        width: 100%;
        padding: 8px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type="submit"] {
        background-color: #333;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        background-color: #555;
    }

    h2 {
        margin-top: 20px;
        text-align: center;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }
</style>

Vehicle Comparison

Electric Vehicle: 
        <label for="gas_vehicle">Gas Vehicle:</label>
        <select id="gas_vehicle" name="gas_vehicle">
            {% for gas_vehicle in gas_data.keys() %}
                <option value="{{ gas_vehicle }}">{{ gas_vehicle }}</option>
            {% endfor %}
        </select>

        <input type="submit" value="Compare">
    </form>

    {% if selected_electric_data and selected_gas_data %}
        <h2>Comparison Result</h2>
        <table>
            <tr>
                <th>Parameter</th>
                <th>Electric Vehicle</th>
                <th>Gas Vehicle</th>
            </tr>
            {% for parameter, value in selected_electric_data.items() %}
                <tr>
                    <td>{{ parameter }}</td>
                    <td>{{ value }}</td>
                    <td>{{ selected_gas_data[parameter] }}</td>
                </tr>
            {% endfor %}
        </table>
    {% endif %}

    <p><a href="{{ url_for('input_own_data') }}">Input Your Own Data</a></p>
</section>

home.html

Home Page body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } 
    header {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 1em;
    }

    section {
        max-width: 600px;
        margin: 20px auto;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1, h2 {
        text-align: center;
    }

    p {
        text-align: justify;
    }

    a.button {
        display: block;
        margin: 10px 0;
        padding: 10px;
        background-color: #333;
        color: white;
        text-align: center;
        text-decoration: none;
        border-radius: 4px;
    }

    a.button:hover {
        background-color: #555;
    }
</style>

Welcome to the Vehicle Comparison Tool

<section>
    <h2>About the Tool</h2>
    <p>This tool allows you to compare the costs of different electric and gasoline vehicles over a 5-year period. It takes into account various factors such as purchase price, fuel costs, and maintenance expenses.</p>

    <a href="https://evetgazwonkai21repl.wordpress.com" class="button">Read the Article</a>
    <a href="/vehicle-comparison" class="button">Go to Vehicle Comparison Tool</a>
</section>

Why won’t the vehicle comparison page open? The terminal says Non-ASCII character xc3 on line 10 in main.py.

2

Hi there - can you share the url of the Glitch project, it may be easier for us to see the brokenness in action.

3

<a href="/vehicle-comparison" class="button">Go to Vehicle Comparison Tool</a>

that’s a link, which makes those clickable pieces of text. when you click it, the browser opens that URL by requesting it from the server. there’s another part to the request other than the URL, called the “method,” which is a short word. when opening links, browsers use the method “GET.”

@app.route(‘/compare-vehicles’, methods=[‘POST’])

(messed up quotes excepted) that’s a route that specifically handles the “POST” method. flask will skip over it if the request method is “GET” as in the case above.

and none of the other routes match, so it uses some built in fallback 404 responder.

4
5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.