Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Problemas al visualizar el id.

Hola buena tarde, reaice los pasos del video y no logro visualizar el id, ya estoy implementando el cdn uuid.v4(). Código del archivo addTask.js

import checkComplete from "./checkComplete.js";
import deleteIcon from "./deleteIcon.js";
import { displayTasks } from "./readTasks.js";

export const addTask = (e) => {
  e.preventDefault();

  const list = document.querySelector('[data-list]');
  const input = document.querySelector('[data-form-input]');
  const calendar = document.querySelector('[data-form-date]');

  const value = input.value;
  const date = calendar.value;
  const dateFormat = moment(date).format('DD/MM/YYYY');

if (value === '' || date === '') {
  return;
}

  input.value = '';
  calendar.value = '';

  const complete = false;

  const taskObj = {
    value, 
    dateFormat,
    complete,
    id: uuid.v4()
  };

  list.innerHTML = '';

  const taskList = JSON.parse(localStorage.getItem('tasks')) || [];
  taskList.push({value, dateFormat, complete});
  localStorage.setItem('tasks', JSON.stringify(taskList));

  displayTasks();
}

export const createTask = ({value, dateFormat, complete, id}) => {
  const task = document.createElement('li');
  task.classList.add('card');

  const taskContent = document.createElement('div');

  console.log(complete);
  if(complete){
    console.log("Completada");
  }

  const titleTask = document.createElement('span');
  titleTask.classList.add('task');
  titleTask.innerText = value;
  taskContent.appendChild(checkComplete(id));
  taskContent.appendChild(titleTask);

  const dateElement = document.createElement('span');
  dateElement.innerHTML = dateFormat;
  task.appendChild(taskContent);
  task.appendChild(dateElement);
  task.appendChild(deleteIcon());
  return task;
};

Código del archivo checkComplete.js

const checkComplete = (id) => {
  const i = document.createElement('i');
  i.classList.add('far', 'fa-check-square', 'icon');
  i.addEventListener('click', (e) => completeTask(e, id));

  return i;
};

const completeTask = (e, id) => {
  const element = e.target;
  element.classList.toggle('fas');
  element.classList.toggle('completeIcon');
  element.classList.toggle('far');
  console.log("Id verificado", id);
};  

export default checkComplete;

En consola me aparece el mensaje Id verificado undefined y en local storage:

[{value: "css", dateFormat: "24/08/2022", complete: false}]
0: {value: "css", dateFormat: "24/08/2022", complete: false}
complete: false
dateFormat: "24/08/2022"
value: "css"
2 respuestas
solución!

Hola! En tu archivo addTask.js prueba cambiando estos datos...

taskList.push({value, dateFormat, complete});
cambialo por...
taskList.push(taskObj);

Gracias por tu ayuda, ese era el problema. Me salvaste