Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não está capturando as datas que selecionei.

Olá, estou com um problema que não estou conseguindo identificar... Quando eu clico em uma data diferente pode ser dos dias anteriores ou dias posteriores a data de hoje ele só fica colocando as tasks debaixo da data de hoje (que no caso seria dia 10). Alguém poderia me ajudar aonde estou errado? Segue os códigos:

components:

carregaTarefa.js

import { ordenaDatas, removeDatasRepetidas } from "../service/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)
    ordenaDatas(datasUnicas)

    datasUnicas.forEach((dia) => {
        lista.appendChild(criaData(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')
}

export default BotaoConclui;

criaData.js

import { Tarefa } from "./criaTarefa.js"

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
}

criaTarefa.js

import { carregaTarefa } from "./carregaTarefa.js"
import BotaoConclui from "./concluiTarefa.js"
import BotaoDeleta from "./deletaTarefa.js" 

export const handleNovoItem = (evento) => {
    evento.preventDefault()

    const tarefas = JSON.parse(localStorage.getItem('tarefas')) || []
    const input = document.querySelector('[data-form-input]')
    const valor = input.value

    const calendario = document.querySelector('[data-list]')
    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       
}

deletaTarefa.js

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;

service: data.js

export const removeDatasRepetidas = (datas) => {
    const datasUnicas = []
    datas.forEach((data => {
        if(datasUnicas.indexOf(data.dataFormatada) === -1) {
            datasUnicas.push(data.dataFormatada)
        }
    }))

    return datasUnicas
}

export const ordenaDatas = (data) => {
    data.sort((a, b) => {
        const primeiraData = moment(a, 'DD/MM/YYYY').format('YYYYMMDD')
        const segundaData = moment(b, 'DD/MM/YYYY').format('YYYYMMDD')

    return primeiraData - segundaData
    })
}

main.js

import { handleNovoItem } from "./components/criaTarefa.js"
import { carregaTarefa } from "./components/carregaTarefa.js"

const novaTarefa = document.querySelector('[data-form-button]')
novaTarefa.addEventListener('click', handleNovoItem)

carregaTarefa()
1 resposta
solução!

Consegui arrumar o erro faltou colocar um data-form-date no input de date time local dentro do index.html, aí eu chamei também esse data-form-date na constante de calendário no arquivo criaTarefa.js, porque eu tinha colocado data-list dentro do array ao invés desse data-form-date.

foto do vscodefoto do vscode