Submit & Change Events

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');

function createLI(text) {
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox);
  li.appendChild(label);  
  const button = document.createElement('button');
  button.textContent = 'remove';
  li.appendChild(button);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
});
  
ul.addEventListener('change', (e) => {
  const checkbox = event.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;
  
  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});
  
ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const li = e.target.parentNode;
    const ul = li.parentNode;
    ul.removeChild(li);
  }
}); 

event.preventDefault()
Is called on the event object to keep the browser’s default behavior from occurring in response to a user action.

submit
Used to respond to clicks on a form’s submit button as well as pressing enter while one of the fields is active.

change
An event that is fired when a change to an <input>, <select> or <textarea> value is committed by the user. To listen to checkbox events, we use the change event type along with event.target.checked.

---

Add Form Group

Creating a form group of a div containing a label and a checkbox input.

1. Create element
2. Fill and customize element
3. Place element in its container
4. Insert container into DOM

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckBox = document.createElement('input');

filterLabel.textContent = "Hide those who haven't responded";
filterCheckBox.type = 'checkbox';

div.appendChild(filterLabel);
div.appendChild(filterCheckBox);

const mainDiv = document.querySelector('.main');
mainDiv.insertBefore(div, ul);

Another example

const card = document.querySelector('.card');
const footer = document.querySelector('footer');
const div = document.createElement('div');
...
card.insertBefore(div, footer);

---

Refactoring

It is the process of rewriting code while leaving the original behavior exactly the same. When refactoring a program, a good place to start is to identify and remove duplicate code.

DOMContentLoaded Event

DOMContentLoaded event triggers when all of the DOM has been parsed and loaded into the browser. Use it to have your code run properly by the browser.

document.addEventListener('DOMContentLoaded', () => {
  // All of your code...
}); 

Create Elements Refactored

function createElement(elementName, property, value) {
  const element = document.createElement(elementName);  
  element[property] = value; 
  return element;
}

Append Child Refactored

function appendToLI(elementName, property, value) {
  const element = createElement(elementName, property, value);     
  li.appendChild(element); 
  return element;
}

Usage

>> const li = document.createElement('li');
>> appendToLI('span', 'textContent', text);     
>> appendToLI('label', 'textContent', 'Confirmed')
     .appendChild(createElement('input', 'type', 'checkbox'));

Event Listeners Refactored

ul.addEventListener('click', (e) => {
  if (e.target.tagName == 'BUTTON') {
    const button = e.target;
    const li = button.parentNode;
    const ul = li.parentNode;
    const action = button.textContent;

    const nameActions = {
      remove: () => {
                ul.removeChild(li);
              },
      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';
              },
      save:   () => {
                const input = li.firstElementChild;
                const span = document.createElement('span');
                span.textContent = input.value;
                li.insertBefore(span, input);
                li.removeChild(input);
                button.textContent = 'edit';
              }
    };

    nameActions[action](); // Selects and runs action in button's name
  }
});