Skip to content

Instantly share code, notes, and snippets.

@JoaoRoccella
Last active February 10, 2025 13:59
Show Gist options
  • Select an option

  • Save JoaoRoccella/f586364700247fbdc97d65b13fc69dbc to your computer and use it in GitHub Desktop.

Select an option

Save JoaoRoccella/f586364700247fbdc97d65b13fc69dbc to your computer and use it in GitHub Desktop.
Arquivos iniciais para o projeto de Back-end 2
.venv
__pycache__
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('base.html', title='Adicionar Tarefa')
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<!-- https://flask.palletsprojects.com/en/stable/tutorial/static/ -->
</head>
<body>
<h2>Digite a tarefa e data de conclusão:</h2>
<input id="tarefa" type="text"></input>
<input id="data" type="date"></input>
<button onclick="adicionarTarefa()">Adicionar tarefa</button>
<p id="exibir"></p>
<div id="lista-de-tarefas"></div>
<script> // MVC -> Modelagem, visualização, controle
// Seção de Modelagem (de dados)
let afazeres;
const afazeresSalvos = JSON.parse(localStorage.getItem('afazeres'));
if(Array.isArray(afazeresSalvos))
{
afazeres = afazeresSalvos;
}else{
afazeres = [ // coleção de objetos
// {
// nome: "",
// id: ""
// }
];
}
function salvarTarefas() { // salva as tarefas no navegador
localStorage.setItem('afazeres', JSON.stringify(afazeres)); // transforma código em string
}
// Seção de Visualização
function renderizar() {
document.getElementById('lista-de-tarefas').innerHTML = "";
afazeres.forEach(function(tarefa){ // função anônima
const elemento = document.createElement('div');
elemento.innerHTML = tarefa.nome + ' - ' + tarefa.dataConclusao;
const botao = document.createElement("button");
botao.innerText = "Apagar";
botao.style = "margin-left: 12px;";
botao.onclick = removerTarefa; // atribui a função a 'onclick' -> sem ()
botao.id = tarefa.id;
elemento.appendChild(botao);
const listaDeTarefas = document.getElementById("lista-de-tarefas");
listaDeTarefas.appendChild(elemento);
})
}
// Seção de Controle
function adicionarTarefa() {
const caixaDeTexto = document.getElementById("tarefa");
const caixaData = document.getElementById("data");
const tarefa = caixaDeTexto.value;
const data = caixaData.value;
afazeres.push(
{
nome: tarefa,
id: Date.now(),
dataConclusao: data,
}
);
salvarTarefas();
renderizar();
// document.getElementById("exibir").innerHTML = afazeres; -> outra forma de fazer ???
}
function removerTarefa(evento){
const botao = evento.target; // retorna o botão clicado
const id = botao.id;
afazeres = afazeres.filter(function(tarefa){
if(tarefa.id == id){ // compara o id do botão com o id da tarefa
return false;
}else{
return true;
}
});
salvarTarefas();
renderizar();
}
renderizar();
</script>
</body>
</html>
blinker==1.9.0
click==8.1.8
colorama==0.4.6
Flask==3.1.0
itsdangerous==2.2.0
Jinja2==3.1.5
MarkupSafe==3.0.2
Werkzeug==3.1.3
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
}
#Tarefa{
background-color: blueviolet;
border-radius: 20px;
padding: 8px;
border: 0px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
margin-top: 10px;
}
button{
background-color: blueviolet;
border-radius: 20px;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
border: 0px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
font-size: 11px;
}
#tarefa{
border-radius: 20px;
border: 2px;
padding: 8px;
background-color: rgb(247, 241, 255);
}
#data{
border-radius: 20px;
border: 2px;
padding: 8px;
background-color: rgb(247, 241, 255);
margin-left: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment