├── .gitignore
├── README.md
├── css
    └── styles.css
├── images
    ├── beer_celebration.svg
    ├── favicon.png
    └── trash.svg
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Todo List with Vue.js 
2 | 
3 | A simple in-browser todo list that saves your todos in Local storage.
4 | 
5 | Made to make life and day-to-day work a little bit easier! 
6 | 
7 | [Check it out here!](https://nourabusoud.github.io/vue-todo-list/)
8 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | body{
  6 |   font-size: 15px;
  7 |   font-family: 'Open Sans', sans-serif;
  8 |   color: #444;
  9 |   background-color: #fefefe;
 10 |   background-image: linear-gradient(#fc6c48 0%, #ef5081 100%);
 11 |   background-repeat: no-repeat;
 12 |   background-size: cover;
 13 |   padding: 50px 20px;
 14 |   margin: 0;
 15 |   min-height: 100vh;
 16 |   position: relative;
 17 | }
 18 | 
 19 | h1{
 20 |   color: #fff;
 21 |   text-align: center;
 22 |   margin-bottom: 40px;
 23 | }
 24 | .todo-wrapper{
 25 |   width: 400px;
 26 |   max-width: 100%;
 27 |   min-height: 500px;
 28 |   margin: 20px auto 50px;
 29 |   border: 1px solid #eee;
 30 |   border-radius: 4px;
 31 |   padding: 40px 20px;
 32 |   -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.05);
 33 |   box-shadow: 0 0 15px 0 rgba(0,0,0,0.05);
 34 |   background-color: #f4f7fc;
 35 |   overflow: hidden;
 36 |   position: relative;
 37 | }
 38 | 
 39 | .todo-title{
 40 |   font-size: 1.2em;
 41 |   color: #f65c65;
 42 |   font-weight: normal;
 43 | }
 44 | 
 45 | form{
 46 |   overflow: overlay;
 47 | }
 48 | 
 49 | form label{
 50 |   display: block;
 51 |   text-align: center;
 52 |   font-size: 1.2em;
 53 | }
 54 | 
 55 | .btn, input {
 56 |   line-height: 2em;
 57 |   border-radius: 3px;
 58 |   border: 0;
 59 |   display: inline-block;
 60 |   margin: 15px 0;
 61 |   padding: 0.2em 1em;
 62 |   font-size: 1em;
 63 | }
 64 | 
 65 | input[type='text'] {
 66 |   border: 1px solid #ddd; 
 67 |   min-width: 80%;
 68 |   transition: all ease-in 0.25s;
 69 | }
 70 | 
 71 | input:focus{
 72 |   outline: none;
 73 |   border: 1px solid #a3b1ff;
 74 | }
 75 | 
 76 | input::placeholder{
 77 |   color: rgba(0,0,0,0.3);
 78 |   font-style: italic;
 79 | }
 80 | 
 81 | /* disable ios zoom on focus */
 82 | @media screen and (-webkit-min-device-pixel-ratio:0) { 
 83 |   select,
 84 |   textarea,
 85 |   input {
 86 |     font-size: 16px;
 87 |   }
 88 | }
 89 | 
 90 | @media screen and (-webkit-min-device-pixel-ratio:0) { 
 91 |   select:focus,
 92 |   textarea:focus,
 93 |   input:focus {
 94 |     font-size: 16px;
 95 |   }
 96 | }
 97 | 
 98 | 
 99 | .btn{
100 |   text-align: center;
101 |   font-weight: bold; 
102 |   cursor: pointer;
103 |   border-width: 1px;
104 |   border-style: solid;
105 | }
106 | 
107 | .btn-add {
108 |   background: #ddd;
109 |   color: #fefefe;
110 |   border-color: #ddd;
111 |   min-width: 17%;
112 |   pointer-events: none;
113 |   transition: all ease-in 0.25s;
114 |   font-size: 2.2em;
115 |   line-height: 0.5em;
116 |   padding: 0.3em 0.3em;
117 |   float: right;
118 | }
119 | 
120 | .btn-add.active{
121 |   background: #6664ff;
122 |   border-color: #6664ff;
123 |   pointer-events: visible;
124 | }
125 | 
126 | .btn-add.active:hover{
127 |   background: #4442f6;
128 |   border-color: #4442f6;
129 | }
130 | 
131 | .btn-add:active{
132 |   transform: scale(0.95);
133 | }
134 | 
135 | .control-buttons{
136 |   position: absolute;
137 |   bottom: 20px;
138 |   left: 50%;
139 |   transform: translateX(-50%);
140 |   width: 100%;
141 |   text-align: center;
142 | }
143 | .btn-secondary{
144 |   display: inline-block;
145 |   position: relative;
146 |   border: 0;
147 |   padding: 0;
148 |   margin: 0 10px;
149 | }
150 | 
151 | .btn-secondary:after{
152 |   position: absolute;
153 |   content: '';
154 |   width: 0;
155 |   height: 3px;
156 |   background-color: #f4586e;
157 |   bottom: 0px;
158 |   left: 0;
159 |   transition: all ease-in 0.25s;
160 | }
161 | 
162 | .btn-secondary:hover:after{
163 |   width: 100%;
164 | }
165 | 
166 | ul.todo-list{
167 |   padding: 0;
168 |   margin-bottom: 30px;
169 | }
170 | 
171 | ul.todo-list li{
172 |   position: relative;
173 |   list-style-type: none;
174 |   display: block;
175 |   margin: 10px 0;
176 |   background: #e0e8f5;
177 |   border-radius: 3px;
178 |   padding-left: 38px; /* custom checkbox width + 16 */
179 |   padding-top: 12px;
180 |   padding-bottom: 12px;
181 |   padding-right: 49px; /* delete button + 5 */ 
182 |   overflow: hidden;
183 | }
184 | 
185 | ul.todo-list.archived li{
186 |   background: #fff;
187 | }
188 | 
189 | .todo-text{
190 |   position: relative;
191 |   display: inline-block;
192 |   padding: 0 0.5em;
193 | }
194 | 
195 | 
196 | ul.todo-list li .delete{
197 |   position: absolute;
198 |   height: 100%;
199 |   top: 50%;
200 |   right: 0;
201 |   transform: translateY(-50%);
202 |   cursor: pointer;
203 |   opacity: 0;
204 |   width: 0;
205 |   background-color: #f56468;
206 |   color: #fff;
207 |   transition: all ease-in 0.25s;
208 | }
209 | 
210 | ul.todo-list li .delete:after{
211 |   position: absolute;
212 |   content: '';
213 |   width: 16px;
214 |   height: 16px;
215 |   top: 50%;
216 |   left: 50%;
217 |   background-image: url(../images/trash.svg);
218 |   background-repeat: no-repeat;
219 |   background-position: center;
220 |   background-size: contain;
221 |   transform: translate(-50%, -50%) scale(0.5);
222 |   transition: all ease-in 0.25s;
223 | }
224 | 
225 | ul.todo-list li:hover .delete{
226 |   width: 44px;
227 |   opacity: 1;
228 | }
229 | 
230 | ul.todo-list li:hover .delete:after{
231 |   transform: translate(-50%, -50%) scale(1);
232 | }
233 |   
234 | .todo-checkbox{
235 |   position: absolute; 
236 |   opacity: 0;
237 |   display: none;
238 | }
239 | 
240 | .todo-checkbox + label {
241 |   position: absolute;
242 |   cursor: pointer;
243 |   left: 10px;
244 |   top: 50%;
245 |   transform: translateY(-50%);
246 |   width: 22px;
247 |   height: 22px;
248 |   border-radius: 2px;
249 |   border: 1px solid #cfdcec;
250 |   background-color: #fff;
251 | }
252 | 
253 | .todo-checkbox:checked + label:after{
254 |   position: absolute;
255 |   content: '';
256 |   top: 30%;
257 |   left: 50%;
258 |   height: 3px;
259 |   width: 6px;
260 |   border: solid #fc6c48;
261 |   border-width: 0 0 2px 2px;
262 |   transform-origin: center center;
263 |   transform: rotate(-45deg) translate(-50%, -50%);
264 | }
265 | 
266 | .todo-checkbox:checked + label:after{
267 |   display: block;
268 | }
269 | 
270 | .todo-checkbox:checked ~ .todo-text{
271 |   color: #888;
272 |   text-decoration: line-through
273 | }
274 | 
275 | .status.free{
276 |   font-weight: bold;
277 |   text-align: center;
278 |   margin: 40px 0;
279 | }
280 | .status.free img{
281 |   display: block;
282 |   width: 50px;
283 |   margin: 10px auto;
284 |   vertical-align: middle;
285 | }
286 | 
287 | .todo-item-enter-active, .todo-item-leave-active {
288 |   transition: opacity ease 0.25s, transform ease-in-out 0.3s;
289 |   transform-origin: left center;
290 | }
291 | 
292 | /* .todo-item-leave-active below version 2.1.8 */
293 | .todo-item-enter, .todo-item-leave-to {
294 |   opacity: 0;
295 |   transform: translateX(100%);
296 | }
297 | 
298 |  
299 | .slide-fade-enter-active, .slide-fade-leave-active {
300 |   transition: all 0.3s ease;
301 | }
302 | /* .slide-fade-leave-active below version 2.1.8 */
303 | .slide-fade-enter, .slide-fade-leave-to {  
304 |   transform: scale(1.1);
305 |   opacity: 0;
306 | }
307 | 
308 | 
309 | /* Footer */
310 | footer{  
311 |   width: 100%;
312 |   text-align: center;
313 |   color: #fff;
314 | }
315 | 
316 | footer a{
317 |   color: #fff;
318 | }
319 | 
320 | .github-links{
321 |   margin-bottom: 30px;
322 | }


--------------------------------------------------------------------------------
/images/beer_celebration.svg:
--------------------------------------------------------------------------------
1 | <svg id="54eae1f1-14f1-4bae-a236-a4102cc78acd" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="815.19" height="739" viewBox="0 0 815.19 739"><defs><linearGradient id="532a2a87-9650-4813-abf1-84f26add26a1" x1="951.7" y1="575.37" x2="951.7" y2="414.37" gradientTransform="translate(-59.96 89.85) rotate(-6.25)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="7946fcfc-5387-48c3-a883-c93cc2ce306d" x1="785.7" y1="711.37" x2="785.7" y2="333.37" xlink:href="#532a2a87-9650-4813-abf1-84f26add26a1"/><linearGradient id="8c715f2b-00db-4dd2-88e2-1138b3e843e3" x1="768.63" y1="421.56" x2="768.63" y2="260.56" gradientTransform="matrix(-0.97, -0.24, -0.24, 0.97, 1136.54, 171.94)" xlink:href="#532a2a87-9650-4813-abf1-84f26add26a1"/><linearGradient id="5ead7ab1-dbab-4409-921f-8190bb8e06e9" x1="602.63" y1="557.56" x2="602.63" y2="179.56" gradientTransform="matrix(-0.97, -0.24, -0.24, 0.97, 1136.54, 171.94)" xlink:href="#532a2a87-9650-4813-abf1-84f26add26a1"/></defs><title>beer celebration</title><circle cx="387" cy="389" r="269.5" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="5" stroke-dasharray="12" opacity="0.4"/><circle cx="387" cy="389" r="205.5" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="5" stroke-dasharray="12" opacity="0.4"/><path d="M950,505.5a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z" transform="translate(-208 -81)" fill="#f5f5f5"/><g opacity="0.5"><path d="M886.18,403.06l2.19,20,36.21-4a34,34,0,0,1,37.52,30.11l5.74,52.41a34,34,0,0,1-30.11,37.52l-36.21,4,2.19,20,56.21-6.16A34,34,0,0,0,990,519.43L979.91,427a34,34,0,0,0-37.52-30.11Z" transform="translate(-208 -81)" fill="url(#532a2a87-9650-4813-abf1-84f26add26a1)"/></g><path d="M891.86,411l2,17.89,28.81-3.16a34,34,0,0,1,37.52,30.11l4.35,39.73a34,34,0,0,1-30.11,37.52l-28.81,3.16,2,17.89L954.24,549a34,34,0,0,0,30.11-37.52L976.08,436a34,34,0,0,0-37.52-30.11Z" transform="translate(-208 -81)" fill="#dbe8fc"/><g opacity="0.5"><path d="M884.8,702l-172.57,18.9a45.5,45.5,0,0,1-50.18-40.28l-36.2-330.52,263-28.81,36.2,330.52A45.5,45.5,0,0,1,884.8,702Z" transform="translate(-208 -81)" fill="url(#7946fcfc-5387-48c3-a883-c93cc2ce306d)"/></g><path d="M651.94,343.56h252a0,0,0,0,1,0,0v314.5a45.5,45.5,0,0,1-45.5,45.5h-161a45.5,45.5,0,0,1-45.5-45.5V343.56A0,0,0,0,1,651.94,343.56Z" transform="translate(-260.38 6.82) rotate(-6.25)" fill="#dbe8fc"/><path d="M669.89,361.09h215.5a0,0,0,0,1,0,0v278.5a45.5,45.5,0,0,1-45.5,45.5H715.39a45.5,45.5,0,0,1-45.5-45.5V361.09a0,0,0,0,1,0,0Z" transform="translate(-260.33 6.78) rotate(-6.25)" fill="#6c63ff"/><path d="M697.69,397c-4.48.49-3.72,7.45.76,7S702.17,396.56,697.69,397Z" transform="translate(-208 -81)" fill="#fff"/><path d="M726.39,475.39c-4.48.49-3.72,7.45.76,7S730.87,474.9,726.39,475.39Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M716.25,529.82c-4.48.49-3.72,7.45.76,7S720.74,529.33,716.25,529.82Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M743,599.32c-4.48.49-3.72,7.45.76,7S747.47,598.83,743,599.32Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M807.25,598.32c-4.48.49-3.72,7.45.76,7S811.74,597.82,807.25,598.32Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M800.28,396.88c-4.48.49-3.72,7.45.76,7S804.76,396.39,800.28,396.88Z" transform="translate(-208 -81)" fill="#fff"/><path d="M846.45,386.79c-4.48.49-3.72,7.45.76,7S850.94,386.3,846.45,386.79Z" transform="translate(-208 -81)" fill="#fff"/><path d="M760.6,420.34c-5.76.63-4.79,9.58,1,8.95S766.36,419.71,760.6,420.34Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M818,512.64c-5.76.63-4.79,9.58,1,8.95S823.75,512,818,512.64Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M731,655.46c-6.4.7-5.32,10.64,1.09,9.94S737.43,654.75,731,655.46Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M699.25,420.52c-6.4.7-5.32,10.64,1.09,9.94S705.66,419.82,699.25,420.52Z" transform="translate(-208 -81)" fill="#fafafa"/><rect x="654.75" y="353.39" width="216" height="63" transform="translate(-245.37 4.34) rotate(-6.25)" fill="#fafafa"/><path d="M762.79,642.42,732.47,365.57l-79.52,8.71,30.32,276.84a45.5,45.5,0,0,0,50.18,40.28L813,682.69A45.5,45.5,0,0,1,762.79,642.42Z" transform="translate(-208 -81)" opacity="0.05"/><path d="M817.46,636.43,787.14,359.59l79.52-8.71L897,627.72a45.5,45.5,0,0,1-40.28,50.18l-79.52,8.71A45.5,45.5,0,0,0,817.46,636.43Z" transform="translate(-208 -81)" fill="#fff" opacity="0.1"/><path d="M901.48,329c-2.16-19.76-64-29.2-138.12-21.09s-132.44,30.72-130.28,50.49c1.32,12.05,24.84,20.26,59.81,23a22.49,22.49,0,0,0,37,24.37c5.29,18.24,17.08,30.7,29.29,29.36,13.36-1.46,22.65-18.95,22.38-40.48,5.52,6.13,12.37,9.51,19.42,8.74,8.59-.94,15.57-7.84,19.45-17.79,4.66,3.66,10,5.52,15.36,4.92,6.93-.76,12.81-5.39,16.86-12.37,2.83,15.76,13.74,27.12,25.36,25.85,12.35-1.35,20.83-16.47,18.94-33.76-1-9.18-4.73-17.13-9.86-22.37C896.9,341.61,902.16,335.14,901.48,329Z" transform="translate(-208 -81)" opacity="0.03"/><path d="M900.5,320c-2.16-19.76-64-29.2-138.12-21.09s-132.44,30.72-130.28,50.49c1.32,12.05,24.84,20.26,59.81,23a22.49,22.49,0,0,0,37,24.37c5.29,18.24,17.08,30.7,29.29,29.36,13.36-1.46,22.65-18.95,22.38-40.48,5.52,6.13,12.37,9.51,19.42,8.74,8.59-.94,15.57-7.84,19.45-17.79,4.66,3.66,10,5.52,15.36,4.92,6.93-.76,12.81-5.39,16.86-12.37C854.5,384.91,865.41,396.28,877,395c12.35-1.35,20.83-16.47,18.94-33.76-1-9.18-4.73-17.13-9.86-22.37C895.92,332.66,901.18,326.2,900.5,320Z" transform="translate(-208 -81)" fill="#fafafa"/><g opacity="0.5"><path d="M371.45,247.87l-4.92,19.52-35.32-8.9a34,34,0,0,0-41.3,24.67L277,334.28a34,34,0,0,0,24.67,41.3l35.32,8.9L332.11,404l-54.83-13.82a34,34,0,0,1-24.67-41.3l22.71-90.15A34,34,0,0,1,316.62,234Z" transform="translate(-208 -81)" fill="url(#8c715f2b-00db-4dd2-88e2-1138b3e843e3)"/></g><path d="M364.74,254.94l-4.4,17.45-28.11-7.08A34,34,0,0,0,290.94,290l-9.77,38.76A34,34,0,0,0,305.85,370L334,377.12l-4.4,17.45L284,383.1a34,34,0,0,1-24.67-41.3l18.56-73.67a34,34,0,0,1,41.3-24.67Z" transform="translate(-208 -81)" fill="#dbe8fc"/><g opacity="0.5"><path d="M331.78,544.15l168.34,42.42a45.5,45.5,0,0,0,55.24-33l81.24-322.42L380,166.49,298.77,488.91A45.5,45.5,0,0,0,331.78,544.15Z" transform="translate(-208 -81)" fill="url(#5ead7ab1-dbab-4409-921f-8190bb8e06e9)"/></g><path d="M381.62,202.09h161a45.5,45.5,0,0,1,45.5,45.5v314.5a0,0,0,0,1,0,0h-252a0,0,0,0,1,0,0V247.59A45.5,45.5,0,0,1,381.62,202.09Z" transform="translate(608.89 784.5) rotate(-165.86)" fill="#dbe8fc"/><path d="M400.24,219.66h124.5a45.5,45.5,0,0,1,45.5,45.5v278.5a0,0,0,0,1,0,0H354.74a0,0,0,0,1,0,0V265.16A45.5,45.5,0,0,1,400.24,219.66Z" transform="translate(609.71 783.76) rotate(-165.86)" fill="#6c63ff"/><path d="M559,267.79c4.37,1.1,2.66,7.89-1.71,6.79S554.61,266.69,559,267.79Z" transform="translate(-208 -81)" fill="#fff"/><path d="M519.8,341.45c4.37,1.1,2.66,7.89-1.71,6.79S515.43,340.35,519.8,341.45Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M522.37,396.75c4.37,1.1,2.66,7.89-1.71,6.79S518,395.65,522.37,396.75Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M486.35,461.93c4.37,1.1,2.66,7.89-1.71,6.79S482,460.82,486.35,461.93Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M422.83,452.11c4.37,1.1,2.66,7.89-1.71,6.79S418.45,451,422.83,452.11Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M457.39,253.53c4.37,1.1,2.66,7.89-1.71,6.79S453,252.43,457.39,253.53Z" transform="translate(-208 -81)" fill="#fff"/><path d="M413,237.2c4.37,1.1,2.66,7.89-1.71,6.79S408.66,236.1,413,237.2Z" transform="translate(-208 -81)" fill="#fff"/><path d="M493.47,282.22c5.62,1.41,3.43,10.14-2.2,8.73S487.85,280.8,493.47,282.22Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M424,365.77c5.62,1.41,3.43,10.14-2.2,8.73S418.33,364.35,424,365.77Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M490.49,519.17c6.24,1.57,3.81,11.27-2.44,9.7S484.24,517.6,490.49,519.17Z" transform="translate(-208 -81)" fill="#fafafa"/><path d="M554.21,290.82c6.24,1.57,3.81,11.27-2.44,9.7S548,289.25,554.21,290.82Z" transform="translate(-208 -81)" fill="#fafafa"/><rect x="388.21" y="215.32" width="216" height="63" transform="translate(709.07 526.39) rotate(-165.86)" fill="#fafafa"/><path d="M460.81,501.9l68-270.06,77.58,19.55-68,270.06a45.5,45.5,0,0,1-55.24,33L405.57,534.9A45.5,45.5,0,0,0,460.81,501.9Z" transform="translate(-208 -81)" opacity="0.05"/><path d="M407.48,488.46l68-270.06-77.58-19.55-68,270.06a45.5,45.5,0,0,0,33,55.24l77.58,19.55A45.5,45.5,0,0,1,407.48,488.46Z" transform="translate(-208 -81)" fill="#fff" opacity="0.1"/><path d="M366.47,172.36c4.86-19.28,67.41-20.14,139.7-1.92s127,48.61,122.11,67.89c-3,11.76-27.39,16.66-62.4,14.57a22.49,22.49,0,0,1-40,19.06c-7.75,17.34-21.13,28.06-33,25.06-13-3.28-19.84-21.88-16.61-43.17-6.31,5.32-13.56,7.72-20.43,6-8.38-2.11-14.34-9.9-16.82-20.29-5.12,3-10.62,4.1-15.89,2.77-6.76-1.7-11.95-7.09-15-14.57-5,15.22-17.33,25-28.67,22.13-12-3-18.37-19.17-14.12-36,2.26-9,7-16.32,12.84-20.8C369.27,185.53,364.95,178.4,366.47,172.36Z" transform="translate(-208 -81)" opacity="0.03"/><path d="M368.67,163.63c4.86-19.28,67.41-20.14,139.7-1.92s127,48.61,122.11,67.89c-3,11.76-27.39,16.66-62.4,14.57a22.49,22.49,0,0,1-40,19.06c-7.75,17.34-21.13,28.06-33,25.06-13-3.28-19.84-21.88-16.61-43.17-6.31,5.32-13.56,7.72-20.43,6-8.38-2.11-14.34-9.9-16.82-20.29-5.12,3-10.62,4.1-15.89,2.77-6.76-1.7-11.95-7.09-15-14.57-5,15.22-17.33,25-28.67,22.13-12-3-18.37-19.17-14.12-36,2.26-9,7-16.32,12.84-20.8C371.47,176.8,367.14,169.67,368.67,163.63Z" transform="translate(-208 -81)" fill="#fafafa"/><g opacity="0.5"><path d="M960.14,737.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L960,767.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,960.14,737.18Z" transform="translate(-208 -81)" fill="#6c63ff"/></g><g opacity="0.5"><path d="M242.14,696.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L242,726.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,242.14,696.18Z" transform="translate(-208 -81)" fill="#6c63ff"/></g><g opacity="0.5"><path d="M278.14,151.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L278,181.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,278.14,151.18Z" transform="translate(-208 -81)" fill="#6c63ff"/></g><g opacity="0.5"><path d="M834.14,107.18a10.89,10.89,0,0,0-14.21,1.32,11.13,11.13,0,0,0,.44,15.51L834,137.51a2.27,2.27,0,0,0,3.21,0l13.5-13.58a11.13,11.13,0,0,0,.35-15.51,10.89,10.89,0,0,0-14.21-1.24A2.29,2.29,0,0,1,834.14,107.18Z" transform="translate(-208 -81)" fill="#6c63ff"/></g><g opacity="0.5"><rect x="443" width="3" height="17" fill="#3ad29f"/><rect x="651" y="81" width="3" height="17" transform="translate(534 -644) rotate(90)" fill="#3ad29f"/></g><g opacity="0.5"><rect x="7" y="218" width="3" height="17" fill="#3ad29f"/><rect x="215" y="299" width="3" height="17" transform="translate(316 10) rotate(90)" fill="#3ad29f"/></g><g opacity="0.5"><rect x="568" y="722" width="3" height="17" fill="#3ad29f"/><rect x="776" y="803" width="3" height="17" transform="translate(1381 -47) rotate(90)" fill="#3ad29f"/></g><g opacity="0.5"><rect x="17" y="497" width="3" height="17" fill="#3ad29f"/><rect x="225" y="578" width="3" height="17" transform="translate(605 279) rotate(90)" fill="#3ad29f"/></g><g opacity="0.5"><rect x="203" y="522" width="3" height="17" fill="#3ad29f"/><rect x="411" y="603" width="3" height="17" transform="translate(816 118) rotate(90)" fill="#3ad29f"/></g><path d="M355.09,751.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,355.09,751.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity="0.5"/><path d="M603.09,717.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,603.09,717.89Z" transform="translate(-208 -81)" fill="#3ad29f" opacity="0.5"/><path d="M699.09,249.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,699.09,249.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity="0.5"/><path d="M956.09,255.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,956.09,255.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity="0.5"/><path d="M586.09,530.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,586.09,530.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity="0.5"/><path d="M1022.09,104.89a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,1022.09,104.89Z" transform="translate(-208 -81)" fill="#f55f44" opacity="0.5"/></svg>


--------------------------------------------------------------------------------
/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nourabusoud/vue-todo-list/3818c99c93a6fc70f331502333ad82eed46c8490/images/favicon.png


--------------------------------------------------------------------------------
/images/trash.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" ?><svg height="100" id="svg6584" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs6586"/><g id="layer1" transform="translate(0,-952.362)"><path d="m 41.66667,962.7787 c -1.15417,0 -2.08334,0.9292 -2.08334,2.0833 l 0,6.25 -16.66666,0 c -2.30834,0 -4.16667,1.8583 -4.16667,4.1667 0,2.3083 1.85833,4.1666 4.16667,4.1666 l 54.16666,0 c 2.30834,0 4.16667,-1.8583 4.16667,-4.1666 0,-2.3084 -1.85833,-4.1667 -4.16667,-4.1667 l -16.66666,0 0,-6.25 c 0,-1.1541 -0.92913,-2.0833 -2.08334,-2.0833 z m 2.08333,4.1666 12.5,0 0,4.1667 -12.5,0 z M 22.91667,983.612 c -2.30834,0 -4.48113,1.89 -4.10155,4.1667 l 8.26821,49.9999 c 0.37667,2.2771 1.85834,4.1667 4.16667,4.1667 l 37.5,0 c 2.30833,0 3.78708,-1.89 4.16667,-4.1667 l 8.26821,-49.9999 c 0.37666,-2.2771 -1.79321,-4.1667 -4.10155,-4.1667 z" id="rect5636" style="color:#fff;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"/></g></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Todo list - Vue.js</title>    
  5 |   <meta name="viewport" content="width=device-width" />
  6 |   <link rel="icon" href="images/favicon.png" sizes="32x32">
  7 |   <link rel="stylesheet" type="text/css" href="css/styles.css">
  8 |   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,100,700,100italic,300italic,400italic">
  9 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
 10 | 
 11 |   <!-- Global site tag (gtag.js) - Google Analytics -->
 12 |   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-39432248-2"></script>
 13 |   <script>
 14 |     window.dataLayer = window.dataLayer || [];
 15 |     function gtag(){dataLayer.push(arguments);}
 16 |     gtag('js', new Date());
 17 | 
 18 |     gtag('config', 'UA-39432248-2');
 19 |   </script>
 20 | 
 21 | </head>
 22 | 
 23 | <body>
 24 |   <div id="app">
 25 |     <h1>Daily To-Do list manager</h1>
 26 |     <section class="todo-wrapper">
 27 |       <h2 class="todo-title">{{ today.day }}<br>{{ today.date }}</h2>
 28 |       <form @keydown.enter.prevent="">
 29 |         <input type="text" class="input-todo" v-bind:class="{ active: new_todo }" placeholder="Take the garbage out" v-model="new_todo" v-on:keyup.enter="addItem">
 30 |         <div class="btn btn-add" v-bind:class="{ active: new_todo }"  @click="addItem">+</div>
 31 |       </form>
 32 | 
 33 |       <div v-if="pending.length > 0">
 34 |         <p class="status busy">You have {{ pending.length }} pending item<span v-if="pending.length>1">s</span></p>
 35 |         <transition-group name="todo-item" tag="ul" class="todo-list">
 36 |           <li v-for="(item, index) in pending" v-bind:key="item.title">
 37 |             <input class="todo-checkbox" v-bind:id="'item_' + item.id" v-model="item.done" type="checkbox">
 38 |             <label v-bind:for="'item_' + item.id"></label>
 39 |             <span class="todo-text">{{ item.title }}</span>
 40 |             <span class="delete" @click="deleteItem(item)"></span>
 41 |           </li>
 42 |         </transition>  
 43 |       </div> 
 44 | 
 45 |       <transition name="slide-fade">
 46 |         <p class="status free" v-if="!pending.length" ><img src="images/beer_celebration.svg" alt="celebration">Time to chill!  You have no todos.</p> 
 47 |       </transition> 
 48 | 
 49 |       <div v-if="completed.length > 0 && showComplete">
 50 |         <p class="status">Completed tasks: {{ completedPercentage }}</p>
 51 |         <transition-group name="todo-item" tag="ul" class="todo-list archived">
 52 |           <li v-for="(item, index) in completed" v-bind:key="item.title">
 53 |             <input class="todo-checkbox" v-bind:id="'item_' + item.id" v-model="item.done" type="checkbox">
 54 |             <label v-bind:for="'item_' + item.id"></label>
 55 |             <span class="todo-text">{{ item.title }}</span>
 56 |             <span class="delete" @click="deleteItem(item)"></span>
 57 |           </li>
 58 |         </transition>  
 59 |       </div>
 60 |       <div class="control-buttons">
 61 |         <div class="btn btn-secondary" v-if="completed.length > 0" @click="toggleShowComplete"><span v-if="!showComplete">Show</span><span v-else>Hide</span> Complete</div>
 62 |         <div class="btn btn-secondary" v-if="todoList.length > 0" @click="clearAll">Clear All</div>
 63 |       </div>
 64 |     </section>
 65 |   </div>
 66 |   <footer>
 67 |     <div class="github-links">
 68 |       <a class="github-button" href="https://github.com/nourabusoud" aria-label="Follow @nourabusoud on GitHub">Follow @nourabusoud</a>
 69 |       <a class="github-button" href="https://github.com/nourabusoud/vue-todo-list" data-icon="octicon-star" aria-label="Star nourabusoud/vue-todo-list on GitHub">Star</a>
 70 |     </div>  
 71 |     Made with <3 by <a href="https://www.nourabusoud.com/">Nour Soud</a><br>
 72 |     View on <a href="https://github.com/nourabusoud/vue-todo-list">Github</a> or play around with it on <a href="https://codepen.io/nourabusoud/pen/WMGZaL">Codepen</a>
 73 |   </footer>
 74 |   <script async defer src="https://buttons.github.io/buttons.js"></script>
 75 | </body>
 76 | 
 77 | 
 78 | <script>
 79 | new Vue({
 80 |   el: '#app',
 81 |   data() {
 82 |     return {
 83 |       todoList: [
 84 |         {"id":0,"title":"Go to codepen and get inspired","done":false},
 85 |         {"id":1,"title":"Pick a project","done":false},
 86 |         {"id":4,"title":"Create a new pen","done":true}
 87 |       ],
 88 |       new_todo: '',
 89 |       showComplete: false,
 90 |     };
 91 |   },
 92 |   mounted() {
 93 |     this.getTodos();
 94 |   },
 95 |   watch: {
 96 |     todoList: {
 97 |       handler: function(updatedList) {
 98 |         localStorage.setItem('todo_list', JSON.stringify(updatedList));
 99 |       },
100 |       deep: true
101 |     }
102 |   },
103 |   computed:{
104 |     pending: function() {
105 |       return this.todoList.filter(function(item) {
106 |         return !item.done;
107 |       })
108 |     },
109 |     completed: function() {
110 |       return this.todoList.filter(function(item) {
111 |         return item.done;
112 |       }); 
113 |     },
114 |     completedPercentage: function() {
115 |       return (Math.floor((this.completed.length / this.todoList.length) * 100)) + "%";
116 |     },
117 |     today: function() {
118 |       var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
119 |       var today = new Date();
120 |       var dd = today.getDate();
121 |       var mm = today.getMonth()+1; //January is 0!
122 |       var yyyy = today.getFullYear();
123 | 
124 |       if(dd<10) {
125 |           dd = '0'+dd
126 |       } 
127 | 
128 |       if(mm<10) {
129 |           mm = '0'+mm
130 |       } 
131 | 
132 |       today = {
133 |         day: weekday[today.getDay()],
134 |         date:  mm + '-' + dd + '-' + yyyy,
135 |       }
136 | 
137 |       return(today);
138 |     }
139 |   },
140 |   methods: {
141 |     // get all todos when loading the page
142 |     getTodos() {
143 |       if (localStorage.getItem('todo_list')) {
144 |         this.todoList = JSON.parse(localStorage.getItem('todo_list'));
145 |       }
146 |     },
147 |     // add a new item
148 |     addItem() {
149 |       // validation check
150 |       if (this.new_todo) {
151 |         this.todoList.unshift({
152 |           id: this.todoList.length,
153 |           title: this.new_todo,
154 |           done: false,
155 |         });
156 |       }
157 |       // reset new_todo
158 |       this.new_todo = '';
159 |       // save the new item in localstorage
160 |       return true;
161 |     },
162 |     deleteItem(item) {
163 |       this.todoList.splice(this.todoList.indexOf(item), 1);
164 |     },
165 |     toggleShowComplete() {
166 |       this.showComplete = !this.showComplete;
167 |     },
168 |     clearAll() {
169 |       this.todoList = [];
170 |     }
171 |   },
172 | });
173 | </script>
174 | 


--------------------------------------------------------------------------------