Advertisement
EntropyStarRover

1. Task Manager

Feb 17th, 2021
848
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.     let sections=Array.from(document.getElementsByTagName('section'));
  3.     let open=sections[1];
  4.     let inProgress=sections[2];
  5.     let finished=sections[3];
  6.     console.log(open,inProgress,finished);
  7.     let inputs=Array.from(document.getElementsByTagName("input"));
  8.     console.log(inputs)
  9.     let taskInput=inputs[0];
  10.     let descInput=document.getElementById("description")
  11.     let dateInput=inputs[1];
  12.  
  13.     let addBtn=document.getElementById('add');
  14.     addBtn.addEventListener("click",addToOpen);
  15.  
  16.     function addToOpen(e){
  17.         e.preventDefault();
  18.         console.log('add to open clicked');
  19.         let task=taskInput.value;
  20.         let description=descInput.value;
  21.         let dueDate=dateInput.value;
  22.  
  23.         console.log(description)
  24.         if (task.length>0&&description.length>0&& dueDate.length>0){
  25.             console.log('inputs are fine, lets go');
  26.  
  27.             let taskObj={ttask:task,tdescription:description,tdueDate:dueDate}
  28.  
  29.             let taskArticle=document.createElement("article");
  30.             let taskH=document.createElement("h3");
  31.             taskH.textContent=task;
  32.  
  33.             let descP=document.createElement("p");
  34.             descP.textContent=`Description: ${description}`;
  35.             let dateP=document.createElement("p");
  36.             dateP.textContent=`Due Date: ${dueDate}`;
  37.  
  38.             let buttonsDiv=document.createElement("div");
  39.             buttonsDiv.className="flex";
  40.  
  41.             let startBtn=document.createElement("button");
  42.             startBtn.textContent="Start";
  43.             startBtn.className="green";
  44.             startBtn.addEventListener("click", ()=>(moveTaskToInProgres(taskObj,taskArticle)));
  45.  
  46.             let delBtn=document.createElement("button");
  47.             delBtn.textContent="Delete";
  48.             delBtn.className="red";
  49.             delBtn.addEventListener("click",()=>(deleteArticle(taskArticle)));
  50.            
  51.             buttonsDiv.appendChild(startBtn);
  52.             buttonsDiv.appendChild(delBtn);
  53.  
  54.             taskArticle.appendChild(taskH);
  55.             taskArticle.appendChild(descP);
  56.             taskArticle.appendChild(dateP);
  57.             taskArticle.appendChild(buttonsDiv)
  58.  
  59.             open.appendChild(taskArticle)
  60.  
  61.             taskInput.value="";
  62.             dateInput.value="";
  63.             descInput.value="";
  64.         }
  65.     }
  66.     function deleteArticle(art){
  67.         art.remove();
  68.     }
  69.  
  70.     function moveTaskToInProgres(taskObj,aToDelete){
  71.         //let taskObj={ttask:task,tdescription:description,tdueDate:dueDate}
  72.         let taskArticle=document.createElement("article");
  73.             let taskH=document.createElement("h3");
  74.             taskH.textContent=taskObj.ttask;
  75.  
  76.             let descP=document.createElement("p");
  77.             descP.textContent=`Description: ${taskObj.tdescription}`;
  78.             let dateP=document.createElement("p");
  79.             dateP.textContent=`Due Date: ${taskObj.tdueDate}`;
  80.  
  81.             let buttonsDiv=document.createElement("div");
  82.             buttonsDiv.className="flex";
  83.  
  84.             let delBtn=document.createElement("button");
  85.             delBtn.textContent="Delete";
  86.             delBtn.className="red";
  87.             delBtn.addEventListener("click",()=>(deleteArticle(taskArticle)));
  88.  
  89.             let finishBtn=document.createElement("button");
  90.             finishBtn.textContent="Finish";
  91.             finishBtn.className="orange";
  92.             finishBtn.addEventListener("click", ()=>(moveTaskToFinished(taskObj,taskArticle)));
  93.            
  94.            
  95.             buttonsDiv.appendChild(delBtn);
  96.             buttonsDiv.appendChild(finishBtn);
  97.  
  98.             taskArticle.appendChild(taskH);
  99.             taskArticle.appendChild(descP);
  100.             taskArticle.appendChild(dateP);
  101.             taskArticle.appendChild(buttonsDiv)
  102.  
  103.             inProgress.appendChild(taskArticle);
  104.             aToDelete.remove();
  105.     }
  106.  
  107.     function moveTaskToFinished(obj, artToDelete){
  108.         let taskArticle=document.createElement("article");
  109.             let taskH=document.createElement("h3");
  110.             taskH.textContent=obj.ttask;
  111.  
  112.             let descP=document.createElement("p");
  113.             descP.textContent=`Description: ${obj.tdescription}`;
  114.             let dateP=document.createElement("p");
  115.             dateP.textContent=`Due Date: ${obj.tdueDate}`;
  116.             taskArticle.appendChild(taskH);
  117.             taskArticle.appendChild(descP);
  118.             taskArticle.appendChild(dateP);
  119.            
  120.             finished.appendChild(taskArticle);
  121.             artToDelete.remove();
  122.  
  123.     }
  124. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement