<div class="main">
  <h1>What has to be done?</h1>
  <div class="tasks">
    <p id="empty">Nothing to do :)</p>
    <!-- Open tasks -->
    <hr class="done">
    <!-- Completed tasks -->
    <button id="cleanup">Remove completed tasks</button>
  </div>
  <div class="add-new-task">
    <h2>Create new task</h2>
    <label for="task-label">Task</label>
    <input type="text" id="task-label">
    <button id="add">Add</button>
  </div>
</div>
body {
  font-family: Roboto;
  margin: 0px;
  padding: 0px;
}

.main {
  margin: 0 auto;
  width: 600px;
}

.hidden {
  display: none;
}

#empty {
  margin-bottom: 20px;
  color: #999;
  text-align: center;
}

#cleanup {
  margin-top: 20px;
}

.add-new-task {
  margin-top: 40px;
}
const emptyNode = document.querySelector('#empty');

function checkboxHandler(event) {
  const checked = this.checked;
  const element = event.target;
  element.classList.toggle('checked', checked);
  const parent = event.target.parentNode;
  
  document.querySelector('hr.done')
    .insertAdjacentElement(`${checked ? 'afterEnd' : 'beforeBegin'}`, parent);
  
  checkList();
}

function checkList() {
  if (document.querySelector('hr.done').previousElementSibling === emptyNode) {
    emptyNode.classList.remove('hidden');
  } else {
    emptyNode.classList.add('hidden');
  }
}

function addTask(name, checked=false) {
  if (!name || name.trim() === '') {
    return false;
  }
  
  const date = new Date();
  const random = Math.floor(Math.random() * (+999 - +1)) + +1; 
  const taskId = date.getTime() * random;
  
  const div = document.createElement('div');
  
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.id = taskId;
  checkbox.checked = checked;
  checkbox.classList.toggle('checked', checked);
  
  const label = document.createElement('label');
  label.setAttribute('for', taskId);
  label.innerText = name;
  
  div.appendChild(checkbox);
  div.appendChild(label);  
  
  document.querySelector('hr.done')
    .insertAdjacentElement(`${checked ? 'afterEnd' : 'beforeBegin'}`, div);
  
   checkbox.addEventListener('change', checkboxHandler);
  
  checkList();
}

// cleanup button
document.querySelector('#cleanup').addEventListener('click', e => {
  document.querySelectorAll('.checked').forEach((checkbox) => {
    const checkboxContainer = checkbox.parentNode;
    const checkboxesContainer = checkboxContainer.parentNode;
    checkboxesContainer.removeChild(checkboxContainer);
  });
});

// add button
document.querySelector('#add').addEventListener('click', e => {
  let input = document.querySelector('#task-label');
  let taskname = input.value;
  
  input.value = '';
  
  addTask(taskname);
});

// insert default tasks
addTask('Clean up the house');
addTask('Go shopping');
addTask('Have morning coffee', true);
View Compiled

External CSS

  1. https://unpkg.com/@orgenic/orgenic-ui@0.2.0/dist/themes/__dark.theme.css
  2. https://unpkg.com/@orgenic/orgenic-ui@0.2.0/dist/themes/__light.theme.css

External JavaScript

  1. https://unpkg.com/@orgenic/orgenic-ui@0.2.0/dist/orgenic-ui.js