lista = ['1', '2', '3']
return render_template('limpa_email.html', contador=lista) {% for conte in contador %}
<h2>{{conte}}</h2>
{% endfor %}Gostaria de colocar um sleep no HTML para aparecer os número com um tempo de espera.
O chatGPT diz que é possível com algo semelhante a isso:
{% for conte in contador %}
<h2>{{conte}}</h2>
{{ time.sleep(1) }}
{% endfor %}
Porém, não estou conseguindo. Alguém tem alguma ideia?
hoje, com a Alura e o Google Gemini
Olá André, tudo bem com você?
Para obter o resultado desejado, utilizaremos a linguagem JavaScript para manipularmos o comportamento da página e através dele, faremos com que os números sejam exibidos após um período determinado de tempo. Deixo abaixo os passos realizados.
Para que os números não sejam exibidos imediatamente na página, iremos adicionar um estilo CSS que define a propriedade display dos elementos da lista como none. Isso fará com que os elementos da lista fiquem ocultos até que sejam exibidos pelo JavaScript. Abaixo a representação da classe CSS.
.hidden {
display: none;
}No arquivo templates/index.html utilizaremos o seguinte modelo. No código abaixo, estamos adicionando a classe CSS hidden aos elementos li da lista.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de atualização de lista com Flask</title>
<!-- Estilos CSS -->
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Lista de números</h1>
<ul id="numbers-list">
{% for number in numbers %}
<li class="hidden">{{ number }}</li>
{% endfor %}
</ul>
</body>
</html>Para a exibição dos elementos, removeremos a classe CSS hidden e utilizando o método setTimeout() do JavaScript definiremos que será feito uma espera de 3 segundos a cada adição de um número à lista. Representado no código abaixo.
<script type="text/javascript">
var numbers = document.getElementById('numbers-list').children;
var index = 0;
function addNumber() {
if (index < numbers.length) {
numbers[index].classList.remove('hidden');
index++;
setTimeout(addNumber, 3000);
}
}
setTimeout(addNumber, 3000);
</script>No script acima, estamos removendo a classe "hidden" dos elementos da lista usando o método classList.remove(), o que fará com que eles sejam exibidos na página. O script acima deve ser adicionado ao arquivo templates/index.html dentro da tag body. O arquivo ficará como apresentado abaixo.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de atualização de lista com Flask</title>
<!-- Estilos CSS -->
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Lista de números</h1>
<ul id="numbers-list">
{% for number in numbers %}
<li class="hidden">{{ number }}</li>
{% endfor %}
</ul>
<script type="text/javascript">
var numbers = document.getElementById('numbers-list').children;
var index = 0;
function addNumber() {
if (index < numbers.length) {
numbers[index].classList.remove('hidden');
index++;
setTimeout(addNumber, 3000);
}
}
setTimeout(addNumber, 3000);
</script>
</body>
</html>O arquivo main.py deverá conter as seguintes linhas de código.
from flask import Flask, render_template
import time
app = Flask(__name__)
@app.route('/')
def index():
numbers = [1, 2, 3, 4, 5] # Adicione aqui a lista de números que deseja exibir
return render_template('index.html', numbers=numbers)
if __name__ == '__main__':
app.run(debug=True)Basta executar o aplicativo Flask e acessar a rota principal em um navegador, você verá a lista de números ocultos até que sejam exibidos um de cada vez após 3 segundos. Como apresentado no GIF abaixo.
Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.
Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.
Abraços e bons estudos!