Backend
Your /tasks endpoint (i.e., find_all_tasks function) should return a new Jinja2 TemplateResponse with the list of tasks. For instance:
@app.get('/tasks')
def find_all_tasks(request: Request):
tasks = ['task 1', 'task 2', 'task 3']
return templates.TemplateResponse("tasks.html", {"request": request, 'tasks': tasks})
Frontend
1. Click on the URL to get to the tasks page
In index.html, you can use the url_for() function to get the URL for an endpoint and allow the user to click on it, for example:
<a href="{{ url_for('find_all_tasks') }}">Click me</a>
or
<form action="{{ url_for('find_all_tasks') }}">
<button>Click me</button>
</form>
or
<button onclick="location.href="https://stackoverflow.com/questions/74237542/{{ url_for("find_all_tasks') }}';">Click me</button>
or
<input type="button" onclick="location.href="https://stackoverflow.com/questions/74237542/{{ url_for("find_all_tasks') }}';" value="Click me"/>
Alternatively, you can use relative paths, as described here and here, passing the name of the route and any required path/query parameters. For example:
<a href="/tasks">Click me</a>
If your endpoint contains path and/or query parameters, please have a look at this answer and this answer on how to include those as well.
2. Display tasks
In tasks.html template, you can loop through and output the tasks inside braces, as shown in this answer and below:
<!DOCTYPE html>
<html>
<body>
{% for task in tasks %}
<tr>
<td>{{ task }}</td><br>
</tr>
{% endfor %}
</body>
</html>