Segui passo a passo da aula e dps copiei e colei os arquivos no meu, para ter certeza, mas após mudar meu código, o programa n funciona mais, atualizando a página toda vez que adiciono uma tarefa.
Segui passo a passo da aula e dps copiei e colei os arquivos no meu, para ter certeza, mas após mudar meu código, o programa n funciona mais, atualizando a página toda vez que adiciono uma tarefa.
Provavelmente você esqueceu de adicionar o event.preventDefault()
, envie seu código para ver se posso te ajudar.
qual parte seria para mandar?
Pode mandar o codigo todo, html e js
index:
<form class="form" action="">
<input class="form-input" type="text" data-form-input>
<input type="datetime-local" placeholder="preencha 2020-02-23" data-form-date >
<button class="form-button" data-form-button> Novo Item </button>
</form>
<ul class="list" data-list>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script type="module" src="main.js"></script>
criaData.js:
import { Tarefa } from "./criaTarefa"
export const criaData = (data) => {
const tarefas = JSON.parse(localStorage.getItem('tarefas'))||[]
const dataMoment = moment(data, 'DD/MM/YYYY')
const dataTopo = document.createElement('li')
const conteudo = <p class="content-data">${dataMoment.format('DD/MM/YYYY')}</p>
dataTopo.innerHTML = conteudo
tarefas.forEach((tarefa => {
const dia = moment(tarefa.dataFormatada, 'DD/MM/YYYY')
const diff = dataMoment.diff(dia)
if(diff == 0){
dataTopo.appendChild(Tarefa(tarefa))
}
}))
return dataTopo
}
CarregaTarefa.js
import { removeDatasRepetidas } from "../../../services/data.js"
import { criaData } from "./criaData.js"
export const carregaTarefa = () => { const lista = document.querySelector('[data-list]')
const tarefasCadastradas = JSON.parse(localStorage.getItem('tarefas'))||[]
lista.innerHTML = " "
const datasUnicas = removeDatasRepetidas(tarefasCadastradas)
datasUnicas.forEach((dia) => {
const diff = data.diff(dia)
})
}
ConcluiTarefa.js
const BotaoConclui = () => {
const botaoConclui = document.createElement('button')
botaoConclui.classList.add('check-button')
botaoConclui.innerText = 'concluir'
botaoConclui.addEventListener('click', concluirTarefa)
return botaoConclui
}
const concluirTarefa = (evento) => { const botaoConclui = evento.target
const tarefaCompleta = botaoConclui.parentElement
tarefaCompleta.classList.toggle('done')
}
deletaTarefa.js:
export default BotaoConclui
const BotaoDeleta = () => { const botaoDeleta = document.createElement('button')
botaoDeleta.innerText = 'deletar'
botaoDeleta.addEventListener('click', deletarTarefa)
return botaoDeleta
}
const deletarTarefa = (evento) => { const botaoDeleta = evento.target
const tarefaCompleta = botaoDeleta.parentElement
tarefaCompleta.remove()
return botaoDeleta
}
export default BotaoDeleta
criaTarefa.js:
import { carregaTarefa } from './carregaTarefa.js'
import BotaoConclui from './concluiTarefa.js' import BotaoDeleta from './deletaTarefa.js'
export const handleNovoItem = (evento) => { evento.preventDefault(evento) const tarefas = JSON.parse(localStorage.getItem('tarefas'))||[] const input = document.querySelector('[data-form-input]') const valor = input.value
const calendario = document.querySelector('[data-form-date]')
const data = moment(calendario.value)
const dataFormatada = data.format('DD/MM/YYYY')
const dados = {
valor,
dataFormatada
}
const tarefasAtualizadas = [...tarefas, dados]
localStorage.setItem('tarefas', JSON.stringify(tarefasAtualizadas))
input.value = " "
carregaTarefa()
}
export const Tarefa = ({ valor, dataFormatada }) => {
const tarefa = document.createElement('li')
tarefa.classList.add('task')
const conteudo = `<p class="content">${dataFormatada} * ${valor}</p>`
tarefa.innerHTML = conteudo
tarefa.appendChild(BotaoConclui())
tarefa.appendChild(BotaoDeleta())
return tarefa
}
Boa tarde... acho que está faltando a extensão .js em
criaData.js: import { Tarefa } from "./criaTarefa"