Guest User

Untitled

a guest
Jan 21st, 2018
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.66 KB | None | 0 0
  1. window.onload = function() {
  2.  
  3. //////////////////////////////////
  4. // VARIABLES
  5. //////////////////////////////////
  6. // Form
  7. const form = document.querySelector('#registrar');
  8. const input = form.querySelector('input');
  9.  
  10. // Lists
  11. const partyLists = document.querySelectorAll('.party-lists');
  12. const partyInvitedList = document.querySelector('#list-invited')
  13. const partyGoingList = document.querySelector('#list-going');
  14. const partyNotSure = document.querySelector('#list-not-sure');
  15. const partyNotGoing = document.querySelector('#list-not-going');
  16.  
  17. // List Options
  18. const listOptions = document.querySelector('.list-options');
  19. const btnMoveToGoing = document.querySelector('.btnMoveGoing');
  20. const btnMoveToNotSure = document.querySelector('.btnMoveNotSure');
  21. const btnMoveToNotGoing = document.querySelector('.btnMoveNotGoing');
  22. const btnDeleteSelected = document.querySelector('.btnDeleteSelected');
  23.  
  24.  
  25. //////////////////////////////////
  26. // FUNCTIONS
  27. //////////////////////////////////
  28. function createLI(text) {
  29. const li = document.createElement('li');
  30. const span = document.createElement('span');
  31. span.textContent = text;
  32. li.appendChild(span);
  33. const label = document.createElement('label');
  34. const checkbox = document.createElement('input');
  35. checkbox.type = 'checkbox';
  36. label.appendChild(checkbox);
  37. li.appendChild(label);
  38. const editButton = document.createElement('button');
  39. editButton.textContent = 'edit';
  40. li.appendChild(editButton);
  41. const removeButton = document.createElement('button');
  42. removeButton.textContent = 'remove';
  43. li.appendChild(removeButton);
  44. return li;
  45. }
  46.  
  47.  
  48. //////////////////////////////////
  49. // EVENT HANDLERS
  50. //////////////////////////////////
  51. form.addEventListener('submit', function(e) {
  52. e.preventDefault();
  53. const text = input.value;
  54. input.value = '';
  55. const li = createLI(text);
  56. partyInvitedList.appendChild(li);
  57. });
  58.  
  59. for (var i = 0; i < partyLists.length; i++) {
  60. partyLists[i].addEventListener('click', function(e) {
  61. if (e.target.tagName === 'BUTTON') {
  62. const button = e.target;
  63. const li = button.parentNode;
  64. const ul = li.parentNode;
  65. if (button.textContent === 'remove') {
  66. ul.removeChild(li);
  67. } else if (button.textContent === 'edit') {
  68. const span = li.firstElementChild;
  69. const input = document.createElement('input');
  70. input.type = 'text';
  71. input.value = span.textContent;
  72. li.insertBefore(input, span);
  73. li.removeChild(span);
  74. button.textContent = 'save';
  75. } else if (button.textContent === 'save') {
  76. const input = li.firstElementChild;
  77. const span = document.createElement('span');
  78. span.textContent = input.value;
  79. li.insertBefore(span, input);
  80. li.removeChild(input);
  81. button.textContent = 'edit';
  82. }
  83. }
  84. });
  85. }
  86.  
  87. listOptions.addEventListener('click', function(e) {
  88. for (var i = 0; i < partyLists.length; i++) {
  89. partyLists[i].querySelectorAll('*:checked').forEach(function (listItems) {
  90. const button = e.target;
  91. var items = listItems.parentNode.parentNode;
  92. if(button.className === 'btnMoveGoing') {
  93. partyGoingList.appendChild(items);
  94. items.checked = false;
  95. var item = listItems;
  96. item.checked = false;
  97. } else if(button.className === 'btnMoveNotSure'){
  98. partyNotSure.appendChild(items);
  99. var item = listItems;
  100. item.checked = false;
  101. } else if(button.className === 'btnMoveNotGoing'){
  102. partyNotGoing.appendChild(items);
  103. var item = listItems;
  104. item.checked = false;
  105. } else if(button.className === 'btnDeleteSelected'){
  106. listItems.parentNode.parentNode.remove();
  107. var item = listItems;
  108. item.checked = false;
  109. }
  110. });
  111. }
  112. });
  113.  
  114.  
  115. }
  116.  
  117. <div class="top">
  118. <form id="registrar">
  119. <input type="text" name="name" placeholder="Invite Someone">
  120. <button type="submit" name="submit" value="submit">Submit</button>
  121. </form>
  122.  
  123. <div class="list-options">
  124. <button class="btnMoveGoing">Move to Going</button>
  125. <button class="btnMoveNotSure">Move to Not Sure</button>
  126. <button class="btnMoveNotGoing">Move to Not Going</button>
  127. <button class="btnDeleteSelected">Delete Selected</button>
  128. </div>
  129.  
  130. </div><!-- /top -->
  131.  
  132. <div class="col">
  133. <h3>Invited</h3>
  134. <ul id="list-invited" class="party-lists">
  135.  
  136. </ul>
  137. </div>
  138.  
  139. <div class="col">
  140. <h3>Going</h3>
  141. <ul id="list-going" class="party-lists">
  142.  
  143. </ul>
  144. </div>
  145.  
  146. <div class="col">
  147. <h3>Not Sure</h3>
  148. <ul id="list-not-sure" class="party-lists">
  149.  
  150. </ul>
  151. </div>
  152.  
  153. <div class="col">
  154. <h3>Not Going</h3>
  155. <ul id="list-not-going" class="party-lists">
  156.  
  157. </ul>
  158. </div>
Add Comment
Please, Sign In to add comment