JavaScript

I have created a function that completes a task when the user clicks the complete button, however, I am using a for loop to loop through the array so that it can mark it off.

Currently, what it is doing no matter what complete button I press, it marks off only the first task and not the one I want.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/main.css">
    <script src="js/main.js" defer></script>
    <title>To Do Application</title>
</head>

<body>
    <div class="form">
        <input class ="user-input" type="text">
        <input class="date" type="date">
        <input class="time" type="time">
        <button onclick="addTask()" class="add" id="add">+</button>
    </div>

    <div class="list"></div>
    <!--
     <div class="task-content">
        <div class="task" data-id="${id}">
        <div class="new-task-created">${taskNew}</div>
        <label class="due-date">${taskDate}</label>
        <label class="due-time">${taskTime}</label>
    </div>

    <div class="atcion-buttons">
        <button onclick="editItem()" class="edit" data-id="${id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${id}">Complete</button>
    </div>
</div>
-->

</html>

// variables object
const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  list: document.querySelector(".list"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time"),
};
//local storage key

const STORAGE_KEY = "tasks-storage-key";

//Create ID

const createId = () =>
  `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;

//variable of empty array that gets new task
let taskList = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]");


function makeNewTask() {

  const data = {
    id: createId(),
    taskNew: el.input.value,
    taskDate: el.date.value,
    taskTime: el.time.value,
  };

  return data
}


//function that creates new tasks with date and time
function display() {
  const tasks = document.createElement("div");

  data = makeNewTask();

  tasks.innerHTML = `
       <div class="task-content">
        <div class="task" data-id="${data.id}">
        <div class="new-task-created">${data.taskNew}</div>
        <label class="due-date">${data.taskDate}</label>
        <label class="due-time">${data.taskTime}</label>
    </div>

    <div class="action-buttons">
        <button onclick="editItem()" class="edit" data-id="${data.id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${data.id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${data.id}">Complete</button>
    </div>
</div>`;

  taskList.push(tasks);
  el.list.appendChild(tasks);
}

//event listner that listens for add button.
function addTask() {
  display();
}

//function that stores task list.
function storeList() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(taskList));
}

//function that removes task from array with delete button.

function deleteItem() {
  let removeitem = document.querySelector(".task-content");
  removeitem.parentNode.removeChild(removeitem);
  localStorage.removeItem(STORAGE_KEY);
}

//function that removes stored task when deleted.

//function that that edits tasks with date and time.
function editItem(){

}

//function that that completes task.
function completeItem() {
  let taskItem = this.querySelector(".new-task-created");
  let dateItem = this.querySelector(".due-date");
  let timeItem = this.querySelector(".due-time");
  // style..
  taskItem.style.textDecoration = "line-through";
  dateItem.style.textDecoration = "line-through";
  timeItem.style.textDecoration = "line-through";
}

The end result, the complete button should mark off the task via its index and not just the top one.

Answer

// variables object
const el = {
    form: document.querySelector(".form"),
    input: document.querySelector(".user-input"),
    list: document.querySelector(".list"),
    date: document.querySelector(".date"),
    time: document.querySelector(".time"),
  };
  //local storage key
  
  const STORAGE_KEY = "tasks-storage-key";
  
  //Create ID
  
  const createId = () =>
    `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;
  
  //variable of empty array that gets new task
  let taskList = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]");
  
  
  function makeNewTask() {
  
    const data = {
      id: createId(),
      taskNew: el.input.value,
      taskDate: el.date.value,
      taskTime: el.time.value,
    };
  
    return data
  }
  
  
  //function that creates new tasks with date and time
  function display() {
    const tasks = document.createElement("div");
  
    data = makeNewTask();
  
    tasks.innerHTML = `
         <div class="task-content">
          <div class="task" data-id="${data.id}">
          <div class="new-task-created">${data.taskNew}</div>
          <label class="due-date">${data.taskDate}</label>
          <label class="due-time">${data.taskTime}</label>
      </div>
  
      <div class="action-buttons">
          <button onclick="editItem(event)" class="edit" data-id="${data.id}">Edit</button>
          <button onclick="deleteItem(event)" class="delete" data-id="${data.id}">Delete</button>
          <button onclick="completeItem(event)" class="complete" data-id="${data.id}">Complete</button>
      </div>
  </div>`;
  
    taskList.push(tasks);
    el.list.appendChild(tasks);
  }
  
  //event listner that listens for add button.
  function addTask() {
    display();
  }
  
  //function that stores task list.
  function storeList() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(taskList));
  }
  
  //function that removes task from array with delete button.
  
  function deleteItem() {
    let removeitem = document.querySelector(".task-content");
    removeitem.parentNode.removeChild(removeitem);
    localStorage.removeItem(STORAGE_KEY);
  }
  
  //function that removes stored task when deleted.
  
  //function that that edits tasks with date and time.
  function editItem(){
  
  }
  
  //function that that completes task.
  function completeItem(event) {
    const element = event.target.closest('.task-content')
    console.log(element)
    let taskItem = element.querySelector(".new-task-created");
    let dateItem = element.querySelector(".due-date");
    let timeItem = element.querySelector(".due-time");
    // style..
    taskItem.style.textDecoration = "line-through";
    dateItem.style.textDecoration = "line-through";
    timeItem.style.textDecoration = "line-through";
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/main.css">
    <script src="js/main.js" defer></script>
    <title>To Do Application</title>
</head>

<body>
    <div class="form">
        <input class ="user-input" type="text">
        <input class="date" type="date">
        <input class="time" type="time">
        <button onclick="addTask()" class="add" id="add">+</button>
    </div>

    <div class="list"></div>
    <!--
     <div class="task-content">
        <div class="task" data-id="${id}">
        <div class="new-task-created">${taskNew}</div>
        <label class="due-date">${taskDate}</label>
        <label class="due-time">${taskTime}</label>
    </div>

    <div class="atcion-buttons">
        <button onclick="editItem()" class="edit" data-id="${id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${id}">Complete</button>
    </div>
</div>
-->
</body>

</html>

I want my to – do app to put a line through on each task when the complete button is pressed

Advertisement

Answer