Advertisement
Liliana797979

task manager - js advanced exam

Apr 1st, 2022
1,425
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.   let openSection = document.getElementsByTagName("section")[1];
  3.   let progressSection = document.getElementsByTagName("section")[2];
  4.   let completedSection = document.getElementsByTagName("section")[3];
  5.  
  6.   let addBtn = document.getElementById("add");
  7.   addBtn.addEventListener("click", (event) => {
  8.     event.preventDefault();
  9.     let task = document.getElementById("task");
  10.     let description = document.getElementById("description");
  11.     let date = document.getElementById("date");
  12.  
  13.     if (task.value === "" || description.value === "" || date.value === "") {
  14.       return;
  15.     }
  16.  
  17.     let article = document.createElement("article");
  18.     let h3 = document.createElement("h3");
  19.     h3.innerText = task.value;
  20.     let pDescription = document.createElement("p");
  21.     pDescription.innerText = `Description: ${description.value}`;
  22.     let pDate = document.createElement("p");
  23.     pDate.innerText = `Due Date: ${date.value}`;
  24.  
  25.     let div = document.createElement("div");
  26.     div.className = "flex";
  27.     let btnStart = document.createElement("button");
  28.     btnStart.className = "green";
  29.     btnStart.innerText = "Start";
  30.     let btnDelete = document.createElement("button");
  31.     btnDelete.className = "red";
  32.     btnDelete.innerText = "Delete";
  33.  
  34.     btnDelete.addEventListener("click", deleteArticle);
  35.  
  36.     btnStart.addEventListener("click", (event) => {
  37.       let btnFinish = document.createElement("button");
  38.       btnFinish.className = "orange";
  39.       btnFinish.innerText = "Finish";
  40.  
  41.       btnFinish.addEventListener("click", () => {
  42.         article.lastElementChild.remove();
  43.         completedSection.lastElementChild.appendChild(article);
  44.       });
  45.  
  46.       article.lastElementChild.children[0].remove();
  47.       article.lastElementChild.appendChild(btnFinish);
  48.       progressSection.lastElementChild.appendChild(article);
  49.     });
  50.  
  51.     div.appendChild(btnStart);
  52.     div.appendChild(btnDelete);
  53.  
  54.     article.appendChild(h3);
  55.     article.appendChild(pDescription);
  56.     article.appendChild(pDate);
  57.     article.appendChild(div);
  58.  
  59.     openSection.lastElementChild.appendChild(article);
  60.  
  61.     task.value = "";
  62.     description.value = "";
  63.     date.value = "";
  64.   });
  65.  
  66.   function deleteArticle(event) {
  67.     event.target.parentElement.parentElement.remove();
  68.   }
  69. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement