└── javascript-todo ├── web.html ├── javascript.js └── style.css /javascript-todo/web.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 |

Work To-Dos

7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |

Enter text into the input field to add items to your list.

15 |

Click the item to mark it as complete.

16 |

Click the X to remove the item for your list

17 |
18 |
19 |
20 |
21 | 22 | 23 |
24 | 25 |
26 |
27 |
28 |
    29 |
    30 |
    31 |
    32 | 33 | -------------------------------------------------------------------------------- /javascript-todo/javascript.js: -------------------------------------------------------------------------------- 1 | var enterButton = document.getElementById("enter"); 2 | var input = document.getElementById("userInput"); 3 | var ul = document.querySelector("ul"); 4 | var item = document.getElementsByTagName("li"); 5 | function inputLength(){ 6 | return input.value.length; 7 | } 8 | function listLength(){ 9 | return item.length;} 10 | function createListElement() { 11 | var li = document.createElement("li"); // creates an element "li" 12 | li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text 13 | ul.appendChild(li); //adds li to ul 14 | input.value = ""; //Reset text input field 15 | function crossOut() { 16 | li.classList.toggle("done");} 17 | li.addEventListener("click",crossOut); 18 | var dBtn = document.createElement("button"); 19 | dBtn.appendChild(document.createTextNode("X")); 20 | li.appendChild(dBtn); 21 | dBtn.addEventListener("click", deleteListItem); 22 | function deleteListItem(){ 23 | li.classList.add("delete") 24 | }//END ADD CLASS DELETE 25 | } 26 | function addListAfterClick(){ 27 | if (inputLength() > 0) { //makes sure that an empty input field doesn't create a li 28 | createListElement(); 29 | }} 30 | function addListAfterKeypress(event) { 31 | if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return" 32 | //the 13 is the enter key's keycode, this could also be display by event.keyCode === 13 33 | createListElement(); 34 | }} 35 | enterButton.addEventListener("click",addListAfterClick); 36 | input.addEventListener("keypress", addListAfterKeypress); -------------------------------------------------------------------------------- /javascript-todo/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #04A1BF; 3 | text-align: center; 4 | font-family: 'Open Sans', sans-serif; 5 | } 6 | .intro { 7 | margin: 30px 0px; 8 | font-weight: bold; 9 | } 10 | h1 { 11 | color: #ffffff; 12 | text-transform: uppercase; 13 | font-weight: 800; 14 | } 15 | p { 16 | font-weight: 600; 17 | } 18 | #first { 19 | margin-top: 10px; 20 | color: #FFCD5D; 21 | } 22 | #second { 23 | color: #51DF70; 24 | } 25 | #third { 26 | color: #025F70; 27 | margin-bottom: 30px; 28 | } 29 | #center { 30 | border: none; 31 | padding: 5px 15px; 32 | color: #04A1BF; 33 | background-color: #025F70; 34 | transition: all 0.75s ease; 35 | -webkit-transition: all 0.75s ease; 36 | -moz-transition: all 0.75s ease; 37 | -ms-transition: all 0.75s ease; 38 | -o-transition: all 0.75s ease; 39 | font-weight: normal; 40 | } 41 | #enter:hover { 42 | background-color: #02798F; 43 | color: #FFCD5D; 44 | } 45 | ul { 46 | text-align: left; 47 | margin-top: 20px; 48 | } 49 | li { 50 | list-style: none; 51 | padding: 10px 20px; 52 | color: #ffffff; 53 | text-transform: capitalize; 54 | font-weight: 600; 55 | border: 2px solid #025f70; 56 | border-radius: 5px; 57 | margin-bottom: 10px; 58 | background: #4EB9CD; 59 | transition: all 0.75s ease; 60 | -webkit-transition: all 0.5s ease; 61 | -moz-transition: all 0.5s ease; 62 | -ms-transition: all 0.5s ease; 63 | -o-transition: all 0.5s ease; 64 | } 65 | li:hover { 66 | background: #76CFE0; 67 | } 68 | li > button { 69 | font-weight: normal; 70 | background: none; 71 | 72 | border: none; 73 | float: right; 74 | color: #025f70; 75 | font-weight: 800; 76 | } 77 | input { 78 | border-radius: 5px; 79 | min-width: 65%; 80 | padding: 5px; 81 | border: none; 82 | } 83 | .done { 84 | background: #51DF70 !important; 85 | color: #00891E; 86 | } 87 | .delete { 88 | display: none; 89 | } 90 | --------------------------------------------------------------------------------