├── _config.yml ├── git └── sc.png ├── img ├── icon-hires.png ├── icon-normal.png ├── apple-touch-icon.png ├── apple-touch-icon-152x152.png ├── apple-touch-icon-167x167.png └── apple-touch-icon-180x180.png ├── README.md ├── index.html ├── style.css ├── buttons.js └── app.js /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /git/sc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/js-to-do/HEAD/git/sc.png -------------------------------------------------------------------------------- /img/icon-hires.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/js-to-do/HEAD/img/icon-hires.png -------------------------------------------------------------------------------- /img/icon-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/js-to-do/HEAD/img/icon-normal.png -------------------------------------------------------------------------------- /img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/js-to-do/HEAD/img/apple-touch-icon.png -------------------------------------------------------------------------------- /img/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/js-to-do/HEAD/img/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /img/apple-touch-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/js-to-do/HEAD/img/apple-touch-icon-167x167.png -------------------------------------------------------------------------------- /img/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/js-to-do/HEAD/img/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## A Simple To Do Web App using just JavaScript. 2 | As a student I wish to learn more so please feel free to fork, and optimize, add features. 3 | 4 | ![App Screen Shot](https://dhanishgajjar.github.io/js-to-do/git/sc.png) 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ToDo - App by Dhanish Gajjar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
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 | 48 | 49 |
        50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | margin: 0; 8 | padding: 0; 9 | background: rgb(187, 222, 240); 10 | } 11 | 12 | ul { 13 | list-style: none; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | h3 { 19 | font-size: 1em; 20 | font-weight: 700; 21 | color: rgba(0, 0, 0, 0.3); 22 | } 23 | 24 | .wrapper { 25 | width: 90%; 26 | margin: 0 auto; 27 | } 28 | 29 | .app { 30 | margin-top: 2em; 31 | width: 100%; 32 | } 33 | 34 | .app input { 35 | padding-left: .65em; 36 | font-size: 1em; 37 | font-weight: 400; 38 | color: rgba(0, 0, 0, 0.4); 39 | width: 100%; 40 | line-height: 3em; 41 | border-radius: 0; 42 | background: none; 43 | border: none; 44 | border-bottom: 2px solid rgba(0, 0, 0, 0.1); 45 | } 46 | 47 | .app input::placeholder { 48 | font-weight: 400; 49 | color: inherit; 50 | } 51 | 52 | .app input:focus { 53 | outline: none; 54 | } 55 | 56 | .favs, .tasks, .favs ul li, .tasks ul li, .btns, footer { 57 | display: flex; 58 | } 59 | 60 | .favs { 61 | margin-bottom: 1em; 62 | } 63 | 64 | .favs, .tasks { 65 | margin-top: 1em; 66 | flex-direction: column; 67 | text-align: center; 68 | } 69 | 70 | .btns { 71 | flex-direction: row; 72 | margin-right: -18px; 73 | } 74 | 75 | ul li { 76 | color: #666; 77 | font-size: 1em; 78 | font-weight: 400; 79 | background: white; 80 | padding: .75em 1.2em; 81 | border-radius: .3em; 82 | margin: .5em 0; 83 | flex-direction: row; 84 | justify-content: space-between; 85 | align-items: center; 86 | line-height: 1.5; 87 | } 88 | 89 | .favs ul li svg, .tasks ul li svg { 90 | height: 36px; 91 | margin-left: 1.2em; 92 | } 93 | 94 | .favs .fav { 95 | fill: #FFD842; 96 | } 97 | 98 | .bin { 99 | fill: tomato; 100 | transform: scale(0.75); 101 | } 102 | 103 | .cap { 104 | transition: transform 0.2s; 105 | } 106 | 107 | .fav { 108 | fill: lightgray; 109 | transition: transform 0.2s, fill 0.5s; 110 | transform: scale(0.75); 111 | } 112 | 113 | footer { 114 | flex-direction: column; 115 | align-items: center; 116 | margin: 3em 0; 117 | } 118 | 119 | footer p { 120 | margin: 0; 121 | padding: 0; 122 | height: 1.5em; 123 | font-size: .75em; 124 | color: rgba(0, 0, 0, 0.4); 125 | } 126 | 127 | @media (min-width: 768px) { 128 | 129 | .app input { 130 | font-size: 1.2em; 131 | } 132 | 133 | .delete { 134 | height: 1.2em; 135 | } 136 | 137 | .favs, .tasks { 138 | text-align: left; 139 | } 140 | 141 | .favs li, .tasks li { 142 | font-size: 1.25em; 143 | } 144 | 145 | li svg:hover { 146 | cursor: pointer; 147 | } 148 | 149 | .fav, .bin { 150 | transform: scale(0.85); 151 | } 152 | 153 | .fav:hover { 154 | transform: scale(0.9); 155 | } 156 | 157 | .bin:hover .cap { 158 | transform: rotate(-9deg); 159 | } 160 | 161 | } 162 | -------------------------------------------------------------------------------- /buttons.js: -------------------------------------------------------------------------------- 1 | function attachButton(li) { 2 | 3 | let btns = document.createElement('div'); 4 | btns.className = 'btns'; 5 | li.appendChild(btns); 6 | 7 | const xmlns = "http://www.w3.org/2000/svg"; 8 | let boxWidth = 36; 9 | let boxHeight = 36; 10 | 11 | const favoriteButton = document.createElementNS(xmlns, "svg"); 12 | favoriteButton.setAttributeNS(null, "viewBox", "0 0" + " " + boxWidth + " "+ boxHeight); 13 | favoriteButton.setAttributeNS(null, "width", boxWidth); 14 | favoriteButton.setAttributeNS(null, "height", boxHeight); 15 | favoriteButton.setAttributeNS(null, 'class', "fav"); 16 | 17 | favoriteButton.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid'); 18 | let favPath = document.createElementNS (xmlns, "path"); 19 | 20 | favPath.setAttributeNS (null, 'd', "M23 11L18 0l-5 11c-.4.5-1 1-1.6 1L0 13.8l8.3 8.4c.4.5.6 1.2.5 2L6.8 36 17 30.4l1-.3c.4 0 .7.4 1 .6L29 36l-1.8-12c0-.6 0-1.3.5-1.8l8.3-8.4L24.6 12c-.7 0-1.2-.5-1.5-1z"); 21 | favPath.setAttributeNS(null, 'class', "favPath"); 22 | 23 | favoriteButton.appendChild(favPath); 24 | btns.appendChild(favoriteButton); 25 | 26 | boxWidth = 36; 27 | boxHeight = 24; 28 | 29 | const deleteButton = document.createElementNS(xmlns, "svg"); 30 | deleteButton.setAttributeNS(null, "viewBox", "0 0" + " " + boxWidth + " "+ boxHeight); 31 | deleteButton.setAttributeNS(null, "width", boxWidth); 32 | deleteButton.setAttributeNS(null, "height", boxHeight); 33 | deleteButton.setAttributeNS(null, 'class', "delete"); 34 | deleteButton.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid'); 35 | 36 | let bin = document.createElementNS(xmlns, "g"); 37 | bin.setAttributeNS(null, "class", "bin"); 38 | let cap = document.createElementNS (xmlns, "path"); 39 | cap.setAttributeNS(null, "class", "cap"); 40 | 41 | let can = document.createElementNS (xmlns, "path"); 42 | can.setAttributeNS(null, "class", "can"); 43 | 44 | cap.setAttributeNS (null, 'd', "M23.7252648,1.75191502 L16.5206374,1.75191502 L16.5206374,0.358408695 C16.5206374,0.160513813 16.3638258,0 16.1703135,0 L8.60470208,0 C8.41127124,0 8.25445962,0.160513813 8.25445962,0.358408695 L8.25445962,1.75183177 L1.04975087,1.75183177 C0.46994661,1.75183177 0,2.23270718 0,2.8258923 L0,6.19992928 L24.7750156,6.19992928 L24.7750156,2.82597555 C24.7750156,2.23279043 24.305069,1.75191502 23.7252648,1.75191502 Z"); 45 | 46 | can.setAttributeNS (null, 'd', "M3.11525858,32.2713554 C3.15277293,33.1879825 3.89003982,33.911377 4.78664099,33.911377 L20.4035975,33.911377 C21.3001987,33.911377 22.0374655,33.1879825 22.0749799,32.2713554 L23.1902385,8.18462596 L2,8.18462596 L3.11525858,32.2713554 Z M16.1278564,14.1673454 C16.1278564,13.7835442 16.43204,13.4722573 16.8073463,13.4722573 L17.8941233,13.4722573 C18.2691854,13.4722573 18.5736132,13.783461 18.5736132,14.1673454 L18.5736132,27.9286575 C18.5736132,28.3125419 18.2694296,28.6237456 17.8941233,28.6237456 L16.8073463,28.6237456 C16.4322028,28.6237456 16.1278564,28.3127084 16.1278564,27.9286575 L16.1278564,14.1673454 Z M11.3723222,14.1673454 C11.3723222,13.7835442 11.6765059,13.4722573 12.0517308,13.4722573 L13.1385077,13.4722573 C13.5135699,13.4722573 13.8179162,13.783461 13.8179162,14.1673454 L13.8179162,27.9286575 C13.8179162,28.3125419 13.513814,28.6237456 13.1385077,28.6237456 L12.0517308,28.6237456 C11.6765872,28.6237456 11.3723222,28.3127084 11.3723222,27.9286575 L11.3723222,14.1673454 L11.3723222,14.1673454 Z M6.61662529,14.1673454 C6.61662529,13.7835442 6.92080891,13.4722573 7.29603382,13.4722573 L8.38289216,13.4722573 C8.75803569,13.4722573 9.06230069,13.783461 9.06230069,14.1673454 L9.06230069,27.9286575 C9.06230069,28.3125419 8.75811706,28.6237456 8.38289216,28.6237456 L7.29603382,28.6237456 C6.92089029,28.6237456 6.61662529,28.3127084 6.61662529,27.9286575 L6.61662529,14.1673454 Z"); 47 | 48 | bin.appendChild(cap); 49 | bin.appendChild(can); 50 | deleteButton.appendChild(bin); 51 | 52 | btns.appendChild(deleteButton); 53 | } 54 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const taskInput = document.querySelector('input.task'); 4 | const lists = document.querySelector('.lists'); 5 | 6 | const favsSection = document.querySelector('.favs'); 7 | const favTitle = document.querySelector('.favs h3'); 8 | const favs = document.querySelector('.favs ul'); 9 | const favsItems = favs.children; 10 | 11 | const tasksSection = document.querySelector('.tasks'); 12 | const tasksTitle = document.querySelector('.tasks h3'); 13 | const tasks = document.querySelector('.tasks ul'); 14 | const taskItems = tasks.children; 15 | 16 | if ( favsItems.length === 0 ) { 17 | favsSection.style.display = 'none'; 18 | }; 19 | 20 | if ( taskItems.length === 0 ) { 21 | tasksSection.style.display = "none"; 22 | }; 23 | 24 | taskInput.addEventListener('keyup', (e) => { 25 | if (e.keyCode === 13) { 26 | let li = document.createElement('li'); 27 | if (taskInput.value === "") { 28 | alert("Please add a task"); 29 | } else { 30 | li.textContent = taskInput.value; 31 | attachButton(li); 32 | tasks.appendChild(li); 33 | tasksTitle.style.display = ''; 34 | taskInput.value = ''; 35 | 36 | tasksTitle.textContent = "Inbox"; 37 | tasksSection.style.display = ""; 38 | } 39 | } 40 | }); 41 | 42 | lists.addEventListener('click', (event) => { 43 | 44 | const tag = event.target.tagName; 45 | const basevalue = event.target.className.baseVal; 46 | 47 | const clickArea1 = event.target.parentNode.parentNode.parentNode.parentNode.className; 48 | const clickArea2 = event.target.parentNode.parentNode.parentNode.parentNode.parentNode.className; 49 | const clickArea3 = event.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className; 50 | 51 | // Checking if buttons inside tasks section is clicked= 52 | if ( clickArea1 === 'tasks' || clickArea2 === 'tasks' || clickArea3 === 'tasks' ) { 53 | if (tag === 'svg') { 54 | if (basevalue === 'delete' || basevalue === 'can' || basevalue === 'cap' || basevalue === 'bin') { 55 | let li = event.target.parentNode.parentNode; 56 | let ul = li.parentNode; 57 | ul.removeChild(li); 58 | } else if ( basevalue === 'fav') { 59 | let li = event.target.parentNode.parentNode; 60 | let ul = li.parentNode; 61 | favsSection.style.display = ''; 62 | favs.appendChild(li); 63 | favTitle.textContent = "Favorites"; 64 | } 65 | 66 | if ( taskItems.length === 0 ) { 67 | tasksSection.style.display = "none"; 68 | }; 69 | 70 | } else if (tag === 'path') { 71 | if (basevalue === 'delete' || basevalue === 'can' || basevalue === 'cap' || basevalue === 'bin') { 72 | let li = event.target.parentNode.parentNode.parentNode.parentNode; 73 | let ul = li.parentNode; 74 | ul.removeChild(li); 75 | } else if ( basevalue === 'favPath') { 76 | let li = event.target.parentNode.parentNode.parentNode; 77 | let ul = li.parentNode; 78 | favsSection.style.display = ''; 79 | favs.appendChild(li); 80 | favTitle.textContent = "Favorites"; 81 | } 82 | 83 | if ( taskItems.length === 0 ) { 84 | tasksSection.style.display = "none"; 85 | }; 86 | } 87 | 88 | // Checking if buttons inside favs section is clicked 89 | } else if ( clickArea1 === 'favs' || clickArea2 === 'favs' || clickArea3 === 'favs' ) { 90 | if (tag === 'svg') { 91 | if (basevalue === 'delete' || basevalue === 'can' || basevalue === 'cap' || basevalue === 'bin') { 92 | let li = event.target.parentNode.parentNode; 93 | let ul = li.parentNode; 94 | ul.removeChild(li); 95 | } else if ( basevalue === 'fav') { 96 | let li = event.target.parentNode.parentNode; 97 | let ul = li.parentNode; 98 | tasksSection.style.display = ''; 99 | tasks.appendChild(li); 100 | tasksTitle.textContent = "Inbox"; 101 | } 102 | 103 | if ( favsItems.length === 0 ) { 104 | favsSection.style.display = 'none'; 105 | }; 106 | 107 | } else if (tag === 'path') { 108 | if (basevalue === 'delete' || basevalue === 'can' || basevalue === 'cap' || basevalue === 'bin') { 109 | let li = event.target.parentNode.parentNode.parentNode.parentNode; 110 | let ul = li.parentNode; 111 | ul.removeChild(li); 112 | } else if ( basevalue === 'favPath') { 113 | let li = event.target.parentNode.parentNode.parentNode; 114 | let ul = li.parentNode; 115 | tasksSection.style.display = ''; 116 | tasks.appendChild(li); 117 | tasksTitle.textContent = "Inbox"; 118 | } 119 | 120 | if ( favsItems.length === 0 ) { 121 | favsSection.style.display = 'none'; 122 | }; 123 | } 124 | } 125 | }); 126 | --------------------------------------------------------------------------------