├── README.md ├── css ├── normalize.css ├── reset.css └── style.css ├── images ├── bulba.png ├── char.png ├── pika.jpg └── squirt.png ├── index.html └── js └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript To Do List 2 | Add edit and delete items from a list. 3 | 4 | ## How It's Made: 5 | 6 | **Tech used:** HTML, CSS, JavaScript, Jquery 7 | 8 | When the user enters a new input in the top field and presses the submit button a new li is created. The li can be deleted by the delete button that appears on hover, be deleted if the delete all button is selected, which will delete all the lis in the list or if you press the li and its gray and you select to delete all of the gray lis. In addition if the user presses edit they are able to update the value in the input. 9 | 10 | ## Optimizations: 11 | 12 | Remove the strike class from being effected by selecting the edit or delete button. Ability to use the enter key in the keyboard. Make it so no empty lis can be created. And potentially add a backend so inputs can be saved. 13 | 14 | ## Lessons Learned: 15 | 16 | This was a good test for debugging. There is a lot of considerations in making a list like this. 17 | 18 | ## Examples: 19 | 20 | Take a look at these couple examples that I have in my own portfolio: 21 | 22 | **Harvard Museum:** https://github.com/mardelvalle/Harvard-Museum 23 | 24 | **Calorie App:** https://github.com/mardelvalle/Calorie-App 25 | 26 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects `block` display not defined in IE6/7/8/9 & FF3. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* 26 | * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. 27 | */ 28 | 29 | audio, 30 | canvas, 31 | video { 32 | display: inline-block; 33 | *display: inline; 34 | *zoom: 1; 35 | } 36 | 37 | /* 38 | * Prevents modern browsers from displaying `audio` without controls. 39 | * Remove excess height in iOS5 devices. 40 | */ 41 | 42 | audio:not([controls]) { 43 | display: none; 44 | height: 0; 45 | } 46 | 47 | /* 48 | * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. 49 | * Known issue: no IE6 support. 50 | */ 51 | 52 | [hidden] { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /* 61 | * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using 62 | * `em` units. 63 | * 2. Prevents iOS text size adjust after orientation change, without disabling 64 | * user zoom. 65 | */ 66 | 67 | html { 68 | font-size: 100%; /* 1 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | -ms-text-size-adjust: 100%; /* 2 */ 71 | } 72 | 73 | /* 74 | * Addresses `font-family` inconsistency between `textarea` and other form 75 | * elements. 76 | */ 77 | 78 | html, 79 | button, 80 | input, 81 | select, 82 | textarea { 83 | font-family: sans-serif; 84 | } 85 | 86 | /* 87 | * Addresses margins handled incorrectly in IE6/7. 88 | */ 89 | 90 | body { 91 | margin: 0; 92 | } 93 | 94 | /* ========================================================================== 95 | Links 96 | ========================================================================== */ 97 | 98 | /* 99 | * Addresses `outline` inconsistency between Chrome and other browsers. 100 | */ 101 | 102 | a:focus { 103 | outline: thin dotted; 104 | } 105 | 106 | /* 107 | * Improves readability when focused and also mouse hovered in all browsers. 108 | * people.opera.com/patrickl/experiments/keyboard/test 109 | */ 110 | 111 | a:active, 112 | a:hover { 113 | outline: 0; 114 | } 115 | 116 | /* ========================================================================== 117 | Typography 118 | ========================================================================== */ 119 | 120 | /* 121 | * Addresses font sizes and margins set differently in IE6/7. 122 | * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. 123 | */ 124 | 125 | h1 { 126 | font-size: 2em; 127 | margin: 0.67em 0; 128 | } 129 | 130 | h2 { 131 | font-size: 1.5em; 132 | margin: 0.83em 0; 133 | } 134 | 135 | h3 { 136 | font-size: 1.17em; 137 | margin: 1em 0; 138 | } 139 | 140 | h4 { 141 | font-size: 1em; 142 | margin: 1.33em 0; 143 | } 144 | 145 | h5 { 146 | font-size: 0.83em; 147 | margin: 1.67em 0; 148 | } 149 | 150 | h6 { 151 | font-size: 0.75em; 152 | margin: 2.33em 0; 153 | } 154 | 155 | /* 156 | * Addresses styling not present in IE7/8/9, S5, Chrome. 157 | */ 158 | 159 | abbr[title] { 160 | border-bottom: 1px dotted; 161 | } 162 | 163 | /* 164 | * Addresses style set to `bolder` in FF3+, S4/5, Chrome. 165 | */ 166 | 167 | b, 168 | strong { 169 | font-weight: bold; 170 | } 171 | 172 | blockquote { 173 | margin: 1em 40px; 174 | } 175 | 176 | /* 177 | * Addresses styling not present in S5, Chrome. 178 | */ 179 | 180 | dfn { 181 | font-style: italic; 182 | } 183 | 184 | /* 185 | * Addresses styling not present in IE6/7/8/9. 186 | */ 187 | 188 | mark { 189 | background: #ff0; 190 | color: #000; 191 | } 192 | 193 | /* 194 | * Addresses margins set differently in IE6/7. 195 | */ 196 | 197 | p, 198 | pre { 199 | margin: 1em 0; 200 | } 201 | 202 | /* 203 | * Corrects font family set oddly in IE6, S4/5, Chrome. 204 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 205 | */ 206 | 207 | code, 208 | kbd, 209 | pre, 210 | samp { 211 | font-family: monospace, serif; 212 | _font-family: 'courier new', monospace; 213 | font-size: 1em; 214 | } 215 | 216 | /* 217 | * Improves readability of pre-formatted text in all browsers. 218 | */ 219 | 220 | pre { 221 | white-space: pre; 222 | white-space: pre-wrap; 223 | word-wrap: break-word; 224 | } 225 | 226 | /* 227 | * Addresses CSS quotes not supported in IE6/7. 228 | */ 229 | 230 | q { 231 | quotes: none; 232 | } 233 | 234 | /* 235 | * Addresses `quotes` property not supported in S4. 236 | */ 237 | 238 | q:before, 239 | q:after { 240 | content: ''; 241 | content: none; 242 | } 243 | 244 | small { 245 | font-size: 75%; 246 | } 247 | 248 | /* 249 | * Prevents `sub` and `sup` affecting `line-height` in all browsers. 250 | * gist.github.com/413930 251 | */ 252 | 253 | sub, 254 | sup { 255 | font-size: 75%; 256 | line-height: 0; 257 | position: relative; 258 | vertical-align: baseline; 259 | } 260 | 261 | sup { 262 | top: -0.5em; 263 | } 264 | 265 | sub { 266 | bottom: -0.25em; 267 | } 268 | 269 | /* ========================================================================== 270 | Lists 271 | ========================================================================== */ 272 | 273 | /* 274 | * Addresses margins set differently in IE6/7. 275 | */ 276 | 277 | dl, 278 | menu, 279 | ol, 280 | ul { 281 | margin: 1em 0; 282 | } 283 | 284 | dd { 285 | margin: 0 0 0 40px; 286 | } 287 | 288 | /* 289 | * Addresses paddings set differently in IE6/7. 290 | */ 291 | 292 | menu, 293 | ol, 294 | ul { 295 | padding: 0 0 0 40px; 296 | } 297 | 298 | /* 299 | * Corrects list images handled incorrectly in IE7. 300 | */ 301 | 302 | nav ul, 303 | nav ol { 304 | list-style: none; 305 | list-style-image: none; 306 | } 307 | 308 | /* ========================================================================== 309 | Embedded content 310 | ========================================================================== */ 311 | 312 | /* 313 | * 1. Removes border when inside `a` element in IE6/7/8/9, FF3. 314 | * 2. Improves image quality when scaled in IE7. 315 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ 316 | */ 317 | 318 | img { 319 | border: 0; /* 1 */ 320 | -ms-interpolation-mode: bicubic; /* 2 */ 321 | } 322 | 323 | /* 324 | * Corrects overflow displayed oddly in IE9. 325 | */ 326 | 327 | svg:not(:root) { 328 | overflow: hidden; 329 | } 330 | 331 | /* ========================================================================== 332 | Figures 333 | ========================================================================== */ 334 | 335 | /* 336 | * Addresses margin not present in IE6/7/8/9, S5, O11. 337 | */ 338 | 339 | figure { 340 | margin: 0; 341 | } 342 | 343 | /* ========================================================================== 344 | Forms 345 | ========================================================================== */ 346 | 347 | /* 348 | * Corrects margin displayed oddly in IE6/7. 349 | */ 350 | 351 | form { 352 | margin: 0; 353 | } 354 | 355 | /* 356 | * Define consistent border, margin, and padding. 357 | */ 358 | 359 | fieldset { 360 | border: 1px solid #c0c0c0; 361 | margin: 0 2px; 362 | padding: 0.35em 0.625em 0.75em; 363 | } 364 | 365 | /* 366 | * 1. Corrects color not being inherited in IE6/7/8/9. 367 | * 2. Corrects text not wrapping in FF3. 368 | * 3. Corrects alignment displayed oddly in IE6/7. 369 | */ 370 | 371 | legend { 372 | border: 0; /* 1 */ 373 | padding: 0; 374 | white-space: normal; /* 2 */ 375 | *margin-left: -7px; /* 3 */ 376 | } 377 | 378 | /* 379 | * 1. Corrects font size not being inherited in all browsers. 380 | * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. 381 | * 3. Improves appearance and consistency in all browsers. 382 | */ 383 | 384 | button, 385 | input, 386 | select, 387 | textarea { 388 | font-size: 100%; /* 1 */ 389 | margin: 0; /* 2 */ 390 | vertical-align: baseline; /* 3 */ 391 | *vertical-align: middle; /* 3 */ 392 | } 393 | 394 | /* 395 | * Addresses FF3/4 setting `line-height` on `input` using `!important` in the 396 | * UA stylesheet. 397 | */ 398 | 399 | button, 400 | input { 401 | line-height: normal; 402 | } 403 | 404 | /* 405 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 406 | * and `video` controls. 407 | * 2. Corrects inability to style clickable `input` types in iOS. 408 | * 3. Improves usability and consistency of cursor style between image-type 409 | * `input` and others. 410 | * 4. Removes inner spacing in IE7 without affecting normal text inputs. 411 | * Known issue: inner spacing remains in IE6. 412 | */ 413 | 414 | button, 415 | html input[type="button"], /* 1 */ 416 | input[type="reset"], 417 | input[type="submit"] { 418 | -webkit-appearance: button; /* 2 */ 419 | cursor: pointer; /* 3 */ 420 | *overflow: visible; /* 4 */ 421 | } 422 | 423 | /* 424 | * Re-set default cursor for disabled elements. 425 | */ 426 | 427 | button[disabled], 428 | input[disabled] { 429 | cursor: default; 430 | } 431 | 432 | /* 433 | * 1. Addresses box sizing set to content-box in IE8/9. 434 | * 2. Removes excess padding in IE8/9. 435 | * 3. Removes excess padding in IE7. 436 | * Known issue: excess padding remains in IE6. 437 | */ 438 | 439 | input[type="checkbox"], 440 | input[type="radio"] { 441 | box-sizing: border-box; /* 1 */ 442 | padding: 0; /* 2 */ 443 | *height: 13px; /* 3 */ 444 | *width: 13px; /* 3 */ 445 | } 446 | 447 | /* 448 | * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. 449 | * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` 450 | * to future-proof). 451 | */ 452 | 453 | input[type="search"] { 454 | -webkit-appearance: textfield; /* 1 */ 455 | -moz-box-sizing: content-box; 456 | -webkit-box-sizing: content-box; /* 2 */ 457 | box-sizing: content-box; 458 | } 459 | 460 | /* 461 | * Removes inner padding and search cancel button in S5, Chrome on OS X. 462 | */ 463 | 464 | input[type="search"]::-webkit-search-cancel-button, 465 | input[type="search"]::-webkit-search-decoration { 466 | -webkit-appearance: none; 467 | } 468 | 469 | /* 470 | * Removes inner padding and border in FF3+. 471 | */ 472 | 473 | button::-moz-focus-inner, 474 | input::-moz-focus-inner { 475 | border: 0; 476 | padding: 0; 477 | } 478 | 479 | /* 480 | * 1. Removes default vertical scrollbar in IE6/7/8/9. 481 | * 2. Improves readability and alignment in all browsers. 482 | */ 483 | 484 | textarea { 485 | overflow: auto; /* 1 */ 486 | vertical-align: top; /* 2 */ 487 | } 488 | 489 | /* ========================================================================== 490 | Tables 491 | ========================================================================== */ 492 | 493 | /* 494 | * Remove most spacing between table cells. 495 | */ 496 | 497 | table { 498 | border-collapse: collapse; 499 | border-spacing: 0; 500 | } -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /****************************************** 2 | /* SETUP 3 | /*******************************************/ 4 | 5 | /* Box Model Hack */ 6 | * { 7 | -moz-box-sizing: border-box; /* Firexfox */ 8 | -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */ 9 | box-sizing: border-box; /* IE */ 10 | } 11 | 12 | /* Clear fix hack */ 13 | .clearfix:after { 14 | content: "."; 15 | display: block; 16 | clear: both; 17 | visibility: hidden; 18 | line-height: 0; 19 | height: 0; 20 | } 21 | 22 | .clear { 23 | clear: both; 24 | } 25 | 26 | .alignright { 27 | float: right; 28 | padding: 0 0 10px 10px; /* note the padding around a right floated image */ 29 | } 30 | 31 | .alignleft { 32 | float: left; 33 | padding: 0 10px 10px 0; /* note the padding around a left floated image */ 34 | } 35 | 36 | /****************************************** 37 | /* BASE STYLES 38 | /*******************************************/ 39 | 40 | body { 41 | color: #000; 42 | font-size: 12px; 43 | line-height: 1.4; 44 | font-family: Helvetica, Arial, sans-serif; 45 | } 46 | 47 | 48 | /****************************************** 49 | /* LAYOUT 50 | /*******************************************/ 51 | 52 | /* Center the container */ 53 | #container { 54 | width: 960px; 55 | margin: auto; 56 | } 57 | 58 | header { 59 | 60 | } 61 | 62 | footer { 63 | 64 | 65 | } 66 | 67 | 68 | /****************************************** 69 | /* ADDITIONAL STYLES 70 | /*******************************************/ 71 | body{ 72 | height:1500px; 73 | background: #2bd1b5; /* For browsers that do not support gradients */ 74 | background: -webkit-linear-gradient(#2bd1b5, white); /* For Safari 5.1 to 6.0 */ 75 | background: -o-linear-gradient(#2bd1b5, white); /* For Opera 11.1 to 12.0 */ 76 | background: -moz-linear-gradient(#2bd1b5,white); /* For Firefox 3.6 to 15 */ 77 | background: linear-gradient(#2bd1b5, white); /* Standard syntax (must be last)*/ 78 | } 79 | div, h1{ 80 | margin-left: 150px; 81 | } 82 | .strike{ 83 | color:gray; 84 | } 85 | ol{ 86 | height: 110%; 87 | width:370px; 88 | background: #1e927e; 89 | align-content: center; 90 | } 91 | 92 | button, #submit{ 93 | width: 120px; 94 | height: 20px; 95 | font-size: 15px; 96 | background: #2e353b; 97 | border: none; 98 | color: #FFF; 99 | } 100 | li{ 101 | padding: 10px 0s; 102 | height: 30px; 103 | width: 300px; 104 | } 105 | li:nth-of-type(odd){ 106 | background: #1e927e; 107 | } 108 | li:nth-of-type(even){ 109 | background: #1e927e; 110 | } 111 | 112 | .editButton,.deleteButton{ 113 | width: 70px; 114 | margin: 10px; 115 | height: 20px; 116 | float: right; 117 | display:none; 118 | } 119 | 120 | li:hover > .editButton, 121 | li:hover>.deleteButton{ 122 | display: block; 123 | } 124 | .field{ 125 | height: 20px; 126 | width: 50px; 127 | } 128 | .view{ 129 | display:none; 130 | } 131 | -------------------------------------------------------------------------------- /images/bulba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mardelvalle/Javascript-To-Do-List/4af11c247404a6543cc1457496ae3ea6aaa2cb3c/images/bulba.png -------------------------------------------------------------------------------- /images/char.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mardelvalle/Javascript-To-Do-List/4af11c247404a6543cc1457496ae3ea6aaa2cb3c/images/char.png -------------------------------------------------------------------------------- /images/pika.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mardelvalle/Javascript-To-Do-List/4af11c247404a6543cc1457496ae3ea6aaa2cb3c/images/pika.jpg -------------------------------------------------------------------------------- /images/squirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mardelvalle/Javascript-To-Do-List/4af11c247404a6543cc1457496ae3ea6aaa2cb3c/images/squirt.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Blank Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

TO DO LIST

19 |
20 |
21 |
22 | 23 | 24 |
25 |
26 |
27 |
    28 |
29 |
30 |
31 | 32 | 33 | 34 |
35 | 36 | 37 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 82 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | //expect: being able to add items, delete individual items, and several selected or all 2 | // do: add, edit, delete 3 | // see: three buttons, changes to the list for selection,input field 4 | // var toDoList=[] 5 | // var deleteButton = $(''+''+'') 18 | edit=edit+1; 19 | $('ol').append(listitem) 20 | $("#inputId")[0].value = " "; 21 | $(listitem).children("input") 22 | $("input").keydown(function(e){ 23 | if(e.which==13){ 24 | // inputInfo=$("input").val() 25 | // $("span").text(inputInfo) 26 | } 27 | }); 28 | 29 | $(".editButton").off("click") 30 | 31 | $(".editButton").on("click", function(){ 32 | $(this).parent().children("input").toggleClass("view") 33 | inputInfo=$(this).parent().children("input").val() 34 | $(this).parent().children("span").text(inputInfo); 35 | $(this).parent().children("span").toggleClass("view") 36 | 37 | // on enter input will override the previous value of the span with the value entered in the input t 38 | }) 39 | 40 | $(".deleteButton").on("click",function(){ 41 | $(this).parent().remove(); 42 | }); 43 | // $(".deleteButton").hide(); 44 | }) 45 | // listitem.find(".editButton").click(function(){ 46 | // var current=listitem.text() 47 | // $(".editButton").toggleClass(".view") 48 | // }) 49 | // listitem.find(".editButton").click(function(){ 50 | // var current=listitem.text() 51 | // // $(.editButton).on("click",function(){ 52 | // // $(".field").toggleClass("view") 53 | // // 54 | // // } 55 | // ) 56 | // }); 57 | 58 | // $(inputInfo).focusout(function(event){ 59 | // event.preventDefault() 60 | // $(this).hide(); $(this).siblings("#display").show().text($(this).val()); 61 | // }); 62 | $(document).on("click","li",function(){ 63 | $(this).toggleClass("strike"); 64 | }); 65 | $("#Erase").on("click",function(){ 66 | $(".strike").remove(); 67 | }); 68 | $("#Clear").on("click",function(){ 69 | $("li").remove(); 70 | }); 71 | }); 72 | 73 | 74 | 75 | // $(document).on("mouseover","li",function(){ 76 | // event.stopPropagation(); 77 | // // $('li').append(""); 78 | // // $('li').append(""); 79 | // }); 80 | // // if (text !== '') { 81 | // // $('input').hide(0, function() { 82 | // // $(this).parent().html(text + ''); 83 | // // $(this).remove(); 84 | // // }); 85 | // $(document).on("mouseover","li",function(){ 86 | // event.stopPropagation(); 87 | // editButton.appendTo('ul#inputInfo li'); 88 | // 89 | // 90 | // // $('li').append(""); 91 | // // $('li').append(""); 92 | // }); 93 | 94 | // $("button:first-of-type").on("click",(function(){ 95 | // $| 96 | 97 | // }) 98 | // }); 99 | 100 | // $(document).ready(function){ 101 | // $("form:last-of-type").on("click",function(){ 102 | // var text = $(#input).val() 103 | // $("ul").prepend("
  • "+el+"
    • "); 104 | // event.preventDefault(); good stuff here 105 | // }) 106 | // ;}) 107 | 108 | // $("button").click(function(){ 109 | // if($("input").val().length> 0 && $("input").val()!="New task"){ 110 | // // think of this as the length being the length of what is being entered the 0 is saying that if there is nothing in the field then nothing will happen 111 | // 112 | // } 113 | // // 114 | // }) 115 | // 116 | // $('button').click(function(){ 117 | // if ($('input').val().length > 0 && $('input').val() != 'New task') { 118 | // var newTask = '
  • '; 119 | // newTask += $('input').val() + '
    • '; 120 | // $('.tasks').append(newTask); 121 | // $('input').val('New task'); 122 | // } else { 123 | // $('input').val('New task'); 124 | // 125 | // } 126 | // 127 | // }); // end button click 128 | // 129 | // $('input').click(function(){ 130 | // $(this).val(''); 131 | // }); // end input click 132 | // 133 | // 134 | // $('ul').on('click', 'li', function() { 135 | // $(this).hide(); 136 | // }); 137 | 138 | 139 | // var item = document.getElementById('toDoInput').value 140 | // var text = document.createTextNode(item) /* we will be getting the value from the input and entering it in this new v text*/ 141 | // var newItem = document.CreateElement("li") 142 | // }) 143 | // ;}) 144 | // // function todolist() { 145 | // var item = document.getElementById('toDoInput').value 146 | 147 | // /* we will be getting the value from the input and entering it in this new v text*/ 148 | // var newItem = document.CreateElement("li") 149 | // newItem.appendChild(text) /* this appends what ever text entered into the li to create the list*/ 150 | // document.getElementsById('toDoList').appendChild(newItem) /* appends li to ol */ 151 | // 152 | // } 153 | --------------------------------------------------------------------------------