Task List

Keeping Track of Tasks that I need to complete and that I have

by Vince Aggrippino

HTML

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style1.css">
  </head>
  <body>
    <h1 id="activeTask">Active Tasks</h1>
      <ul id="startList">
      </ul>

    <h2 id="completedTask">Completed Tasks</h2>
      <ul id="endList">
      </ul>
    <input type="text" id="inputTask">
    <button type="button" id="assignTask">Assign Task</button>
    <script src="scripts.js"></script>
    <script src="script2.js"></script>
  </body>
</html>

JavaScript

console.clear();
const input = document.getElementById("inputTask");
const bnt = document.getElementById("assignTask");
const startList = document.getElementById("startList");
const endList = document.getElementById("endList");
let li = document.createElement('li');
let bntCreate = document.createElement('button');

const completeTask = (e) => {
  const button = e.target;
  const taskList = document.getElementById(`endList`);
  const item = button.previousSibling;
  endList.appendChild(item);
  button.parentNode.removeChild(button);
}

const getData = () => {
  let li = document.createElement('li');
  let bntCreate = document.createElement('button');
  bntCreate.innerHTML = "Complete!";
  li.textContent = input.value;
  startList.appendChild(li);
  startList.appendChild(bntCreate);
  
  bntCreate.addEventListener(`click`, completeTask);
}

const getComplete = () => {
  alert("click");
}

bnt.addEventListener('click', getData);
bntCreate.addEventListener('click', getComplete);