SHOW:
|
|
- or go back to the newest paste.
| 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 | } | |
| 70 |