5
respostas

Parou de funcionar

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.

5 respostas

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:

Ceep

  <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"