├── css └── style.css ├── index.html └── js └── script.js /css/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | Todo-List-JS 14 | 15 | 16 | 17 | 18 |
19 |

Todo-List-JS

20 | 21 |
22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |

38 | 39 |
40 | 41 |
42 |
43 | 44 | 45 | 46 | 49 | 52 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | if (localStorage.getItem('itemsJson') === '[]'){ 2 | let head = document.getElementById('listhead') 3 | head.innerHTML = "" 4 | } 5 | if (localStorage.getItem('itemsJson') !== '[]'){ 6 | let head = document.getElementById('listhead') 7 | head.innerHTML = "Your List" 8 | } 9 | 10 | 11 | function getAndUpdate(){ 12 | 13 | tit = document.getElementById('title').value; 14 | desc = document.getElementById('description').value; 15 | if (localStorage.getItem('itemsJson')==null){ 16 | itemJsonArray = []; 17 | itemJsonArray.push([tit, desc]); 18 | localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray)) 19 | } 20 | else{ 21 | itemJsonArrayStr = localStorage.getItem('itemsJson') 22 | itemJsonArray = JSON.parse(itemJsonArrayStr); 23 | itemJsonArray.push([tit, desc]); 24 | localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray)) 25 | } 26 | update(); 27 | 28 | document.getElementById('title').value = ""; 29 | document.getElementById('description').value = ""; 30 | } 31 | 32 | function update(){ 33 | if (localStorage.getItem('itemsJson')==null){ 34 | itemJsonArray = []; 35 | localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray)) 36 | } 37 | else{ 38 | itemJsonArrayStr = localStorage.getItem('itemsJson') 39 | itemJsonArray = JSON.parse(itemJsonArrayStr); 40 | } 41 | if (localStorage.getItem('itemsJson') === '[]'){ 42 | let head = document.getElementById('listhead') 43 | head.innerHTML = "" 44 | } 45 | if (localStorage.getItem('itemsJson') !== '[]'){ 46 | let head = document.getElementById('listhead') 47 | head.innerHTML = "Your List" 48 | } 49 | 50 | // Populate the table 51 | let tableBody = document.getElementById("tableBody"); 52 | let str = ""; 53 | itemJsonArray.forEach((element, index) => { 54 | str += ` 55 | 56 |
57 |
58 | 59 | 60 | ${index + 1} 61 | 62 |
63 |
64 |
${element[0]}
65 |

${element[1]}

66 | 67 |
68 |
`; 69 | }); 70 | tableBody.innerHTML = str; 71 | } 72 | add = document.getElementById("add"); 73 | add.addEventListener("click", getAndUpdate); 74 | update(); 75 | function deleted(itemIndex){ 76 | itemJsonArrayStr = localStorage.getItem('itemsJson') 77 | itemJsonArray = JSON.parse(itemJsonArrayStr); 78 | // Delete itemIndex element from the array 79 | itemJsonArray.splice(itemIndex, 1); 80 | localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray)); 81 | update(); 82 | 83 | } 84 | function clearStorage(){ 85 | if (confirm("Do you areally want to clear?")){ 86 | localStorage.clear(); 87 | update() 88 | } 89 | if (localStorage.getItem('itemsJson') === '[]'){ 90 | let head = document.getElementById('listhead') 91 | head.innerHTML = "" 92 | } 93 | if (localStorage.getItem('itemsJson') !== '[]'){ 94 | let head = document.getElementById('listhead') 95 | head.innerHTML = "Your List" 96 | } 97 | 98 | } 99 | 100 | 101 | 102 | 103 | {/* 104 | ${index + 1} 105 | ${element[0]} 106 | ${element[1]} 107 | 108 | */} --------------------------------------------------------------------------------