├── .cpanel.yml ├── README.md ├── index.html ├── script.js └── style.css /.cpanel.yml: -------------------------------------------------------------------------------- 1 | --- 2 | deployment: 3 | tasks: 4 | - export DEPLOYPATH=/home/iteo/public_html/todo-list 5 | - /bin/cp index.html $DEPLOYPATH 6 | - /bin/cp style.css $DEPLOYPATH 7 | - /bin/cp script.js $DEPLOYPATH 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # todo-list 2 | One of every developer's first project 3 | 4 | Can be viewed on : www.i-teo.com/todo-list 5 | 6 | Featured as top solution on Andrei Neagoie's The Complete Web Developer in 2022: Zero to Mastery Udemy course : 7 | https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/learn/lecture/10562216#overview 8 | 9 | v 1.1.0 10 | - Deployed on i-teo.com website using cPanel's Git Version Control 11 | 12 | v 1.0.1 13 | - Added an ugly style.css 14 | - Added handleUlClick function for extra flex 15 | 16 | v 1.0.0 17 | - Modified README.md file 18 | - Removed unnecessarily variables 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Javascript + DOM 5 | 6 | 7 | 8 |
9 |

To Do List

10 |

Get it done today

11 |
12 | 13 | 14 |
15 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var button = document.getElementById("enter"); 2 | var input = document.getElementById("userinput"); 3 | var ul = document.querySelector("ul"); 4 | 5 | function createListElement() { 6 | var div = document.createElement("div"); 7 | var li = document.createElement("li"); 8 | var delButton = document.createElement("button"); 9 | div.classList.add("wrapper"); 10 | ul.appendChild(div); 11 | div.append(li, delButton); 12 | li.classList.add("taskClass"); 13 | li.appendChild(document.createTextNode(input.value)); 14 | input.value = ""; 15 | delButton.classList.add("delClass"); 16 | delButton.innerHTML='Del'; 17 | } 18 | 19 | function inputLength() { 20 | return input.value.length; 21 | } 22 | 23 | function addListAfterClick() { 24 | if (inputLength() > 0) { 25 | createListElement(); 26 | } 27 | } 28 | 29 | function addListAfterKeypress(event) { 30 | if (inputLength() > 0 && event.keyCode === 13) { 31 | createListElement(); 32 | } 33 | } 34 | 35 | function doneTask(task) { 36 | if (task.target.tagName === "LI"){ 37 | task.target.classList.toggle("done"); 38 | } 39 | } 40 | 41 | function deleteListElement(element) { 42 | if (element.target.className === "delClass"){ 43 | element.target.parentElement.remove(); 44 | } 45 | } 46 | 47 | function handleUlClick (element) { 48 | doneTask(element); 49 | deleteListElement(element); 50 | } 51 | 52 | ul.addEventListener("click", handleUlClick) 53 | button.addEventListener("click", addListAfterClick); 54 | input.addEventListener("keypress", addListAfterKeypress); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | /* display: flex; */ 3 | } 4 | 5 | .container { 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | flex-direction: column; 10 | margin: 0rem 20rem 0rem 20rem; 11 | background-color: aliceblue; 12 | border: 1px solid green; 13 | border-radius: 1rem; 14 | box-sizing: border-box; 15 | box-shadow: 0.1rem 0.1rem 0.4rem black; 16 | position: relative; 17 | /* width: 100vh; 18 | height: 60vh; */ 19 | } 20 | 21 | .userInput { 22 | display: flex; 23 | flex-wrap: wrap; 24 | 25 | } 26 | 27 | input { 28 | margin-right: 1rem; 29 | } 30 | 31 | .wrapper { 32 | display: flex; 33 | flex-wrap: wrap; 34 | background-color: burlywood; 35 | } 36 | 37 | .done { 38 | text-decoration: line-through; 39 | } 40 | 41 | ul { 42 | display: block; 43 | } 44 | 45 | .delClass { 46 | display: flex; 47 | color: green; 48 | } --------------------------------------------------------------------------------