Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- window.onload = function() {
- //////////////////////////////////
- // VARIABLES
- //////////////////////////////////
- // Form
- const form = document.querySelector('#registrar');
- const input = form.querySelector('input');
- // Lists
- const partyLists = document.querySelectorAll('.party-lists');
- const partyInvitedList = document.querySelector('#list-invited')
- const partyGoingList = document.querySelector('#list-going');
- const partyNotSure = document.querySelector('#list-not-sure');
- const partyNotGoing = document.querySelector('#list-not-going');
- // List Options
- const listOptions = document.querySelector('.list-options');
- const btnMoveToGoing = document.querySelector('.btnMoveGoing');
- const btnMoveToNotSure = document.querySelector('.btnMoveNotSure');
- const btnMoveToNotGoing = document.querySelector('.btnMoveNotGoing');
- const btnDeleteSelected = document.querySelector('.btnDeleteSelected');
- //////////////////////////////////
- // FUNCTIONS
- //////////////////////////////////
- function createLI(text) {
- const li = document.createElement('li');
- const span = document.createElement('span');
- span.textContent = text;
- li.appendChild(span);
- const label = document.createElement('label');
- const checkbox = document.createElement('input');
- checkbox.type = 'checkbox';
- label.appendChild(checkbox);
- li.appendChild(label);
- const editButton = document.createElement('button');
- editButton.textContent = 'edit';
- li.appendChild(editButton);
- const removeButton = document.createElement('button');
- removeButton.textContent = 'remove';
- li.appendChild(removeButton);
- return li;
- }
- //////////////////////////////////
- // EVENT HANDLERS
- //////////////////////////////////
- form.addEventListener('submit', function(e) {
- e.preventDefault();
- const text = input.value;
- input.value = '';
- const li = createLI(text);
- partyInvitedList.appendChild(li);
- });
- for (var i = 0; i < partyLists.length; i++) {
- partyLists[i].addEventListener('click', function(e) {
- if (e.target.tagName === 'BUTTON') {
- const button = e.target;
- const li = button.parentNode;
- const ul = li.parentNode;
- if (button.textContent === 'remove') {
- ul.removeChild(li);
- } else if (button.textContent === 'edit') {
- const span = li.firstElementChild;
- const input = document.createElement('input');
- input.type = 'text';
- input.value = span.textContent;
- li.insertBefore(input, span);
- li.removeChild(span);
- button.textContent = 'save';
- } else if (button.textContent === 'save') {
- const input = li.firstElementChild;
- const span = document.createElement('span');
- span.textContent = input.value;
- li.insertBefore(span, input);
- li.removeChild(input);
- button.textContent = 'edit';
- }
- }
- });
- }
- listOptions.addEventListener('click', function(e) {
- for (var i = 0; i < partyLists.length; i++) {
- partyLists[i].querySelectorAll('*:checked').forEach(function (listItems) {
- const button = e.target;
- var items = listItems.parentNode.parentNode;
- if(button.className === 'btnMoveGoing') {
- partyGoingList.appendChild(items);
- items.checked = false;
- var item = listItems;
- item.checked = false;
- } else if(button.className === 'btnMoveNotSure'){
- partyNotSure.appendChild(items);
- var item = listItems;
- item.checked = false;
- } else if(button.className === 'btnMoveNotGoing'){
- partyNotGoing.appendChild(items);
- var item = listItems;
- item.checked = false;
- } else if(button.className === 'btnDeleteSelected'){
- listItems.parentNode.parentNode.remove();
- var item = listItems;
- item.checked = false;
- }
- });
- }
- });
- }
- <div class="top">
- <form id="registrar">
- <input type="text" name="name" placeholder="Invite Someone">
- <button type="submit" name="submit" value="submit">Submit</button>
- </form>
- <div class="list-options">
- <button class="btnMoveGoing">Move to Going</button>
- <button class="btnMoveNotSure">Move to Not Sure</button>
- <button class="btnMoveNotGoing">Move to Not Going</button>
- <button class="btnDeleteSelected">Delete Selected</button>
- </div>
- </div><!-- /top -->
- <div class="col">
- <h3>Invited</h3>
- <ul id="list-invited" class="party-lists">
- </ul>
- </div>
- <div class="col">
- <h3>Going</h3>
- <ul id="list-going" class="party-lists">
- </ul>
- </div>
- <div class="col">
- <h3>Not Sure</h3>
- <ul id="list-not-sure" class="party-lists">
- </ul>
- </div>
- <div class="col">
- <h3>Not Going</h3>
- <ul id="list-not-going" class="party-lists">
- </ul>
- </div>
Add Comment
Please, Sign In to add comment