├── style.css ├── test.js ├── app.js ├── index.html ├── project.html └── project.js /style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | // const allButton = document.getElementsByClassName("button-test"); 2 | // const prime = document.getElementById("prime"); 3 | 4 | // console.log(allButton); 5 | // // console.log(prime); 6 | 7 | // for (const button of allButton) { 8 | // button.addEventListener("click", function (e) { 9 | // // console.log(e.target.parentNode); 10 | // console.log(e); 11 | // }); 12 | // } 13 | 14 | let count = 0; 15 | function add(e) { 16 | count++; 17 | control("count"); 18 | } 19 | function minus(params) { 20 | count--; 21 | control("count"); 22 | } 23 | function control(id) { 24 | document.getElementById(id).innerText = count; 25 | } 26 | 27 | // function add(params) { 28 | // bro(); 29 | // } 30 | // add(); 31 | // function minus(params) { 32 | // bro(); 33 | // } 34 | 35 | // function bro(params) { 36 | // console.log("brooooo"); 37 | // } 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 13 | 14 | 15 |

0

16 | 17 |
18 | 25 | 26 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /project.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 12 | 13 | 14 |

TO DO List

15 | 16 |
17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
NumberdescriptionAction
35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /project.js: -------------------------------------------------------------------------------- 1 | let count = 0; 2 | 3 | document.getElementById("add-btn").addEventListener("click", function () { 4 | count++; 5 | const inputValue = document.getElementById("input-value").value; 6 | 7 | if (inputValue == "") { 8 | alert("Please enter a value"); 9 | } else { 10 | const mainContainer = document.getElementById("content-container"); 11 | const tableContainer = document.createElement("tr"); 12 | tableContainer.innerHTML = `${count} 13 | ${inputValue} 14 | 15 | `; 16 | mainContainer.appendChild(tableContainer); 17 | 18 | document.getElementById("input-value").value = ""; 19 | 20 | const deleteButton = document.getElementsByClassName("delete-btn"); 21 | 22 | const doneButton = document.getElementsByClassName("done-btn"); 23 | 24 | for (const button of deleteButton) { 25 | button.addEventListener("click", function (e) { 26 | e.target.parentNode.parentNode.style.display = "none"; 27 | // console.log(e.target.parentNode.parentNode); 28 | }); 29 | } 30 | 31 | for (const button of doneButton) { 32 | button.addEventListener("click", function (e) { 33 | e.target.parentNode.parentNode.style.textDecoration = "line-through"; 34 | }); 35 | } 36 | } 37 | }); 38 | --------------------------------------------------------------------------------