├── index.html ├── mystyle.css └── myscript.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Todo List

13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /mystyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | /*background-color: #3c6dc5;*/ 4 | background-color: #6495ed; 5 | color: white; 6 | font-family: helvetica; 7 | } 8 | #add 9 | { 10 | background-color: red; 11 | border: 0; 12 | color: white; 13 | padding: 10px 10px; 14 | padding-right:40px; 15 | cursor: pointer; 16 | margin-top: 35px; 17 | 18 | } 19 | .remove { 20 | 21 | margin-top:13px; 22 | /*margin-left:150px;*/ 23 | background-color: #f2f205; 24 | float:right; 25 | clear:both; 26 | padding-right:20px; 27 | border-radius:5px; 28 | 29 | 30 | width:60px; 31 | height:20px; 32 | 33 | border-style: none; 34 | 35 | } 36 | #wrapper { 37 | 38 | width: 450px; 39 | background-color: #000365; 40 | margin-top: 120px; 41 | margin-left: 295px; 42 | padding-bottom: 30px; 43 | padding-left: 50px; 44 | padding-top: 30px; 45 | padding-right:65px; 46 | border-radius:25px; 47 | 48 | } 49 | ul { 50 | 51 | list-style:none; 52 | text-align:left; 53 | line-height:35px; 54 | } 55 | #task { 56 | 57 | width:320px; 58 | height:30px; 59 | margin-left:17px; 60 | } 61 | h1{ 62 | margin-top:30px; 63 | } -------------------------------------------------------------------------------- /myscript.js: -------------------------------------------------------------------------------- 1 | function get_todos() { 2 | var todos = new Array; 3 | var todos_str = localStorage.getItem('todo'); 4 | if (todos_str !== null) { 5 | todos = JSON.parse(todos_str); 6 | } 7 | return todos; 8 | } 9 | 10 | function add() { 11 | var task = document.getElementById('task').value; 12 | 13 | var todos = get_todos(); 14 | todos.push(task); 15 | localStorage.setItem('todo', JSON.stringify(todos)); 16 | 17 | show(); 18 | 19 | return false; 20 | } 21 | 22 | function clearDefault(a) { 23 | if (a.defaultValue==a.value) {a.value=""} 24 | 25 | }; 26 | function remove() { 27 | var id = this.getAttribute('id'); 28 | var todos = get_todos(); 29 | todos.splice(id, 1); 30 | localStorage.setItem('todo', JSON.stringify(todos)); 31 | 32 | show(); 33 | 34 | return false; 35 | } 36 | 37 | function show() { 38 | var todos = get_todos(); 39 | 40 | var html = ''; 45 | 46 | document.getElementById('todos').innerHTML = html; 47 | 48 | var buttons = document.getElementsByClassName('remove'); 49 | for (var i=0; i < buttons.length; i++) { 50 | buttons[i].addEventListener('click', remove); 51 | }; 52 | } 53 | 54 | document.getElementById('add').addEventListener('click', add); 55 | show(); --------------------------------------------------------------------------------