<!-- This is an optional feature to switch between the default themes provided by ORGENIC UI -->
<div class="toolbar">Switch Theme &nbsp;
  <og-toggle-switch id="theme-switch"></og-toggle-switch>
</div>

<div class="main">
  <og-card name="What has to be done?">
    <div slot="content">
      <p id="empty">Nothing to do :)</p>
      <hr class="done">
      <og-button id="cleanup" label="Remove completed tasks"></og-button>
    </div>
    <div slot="footer">
      <h4>Create new task</h4>
      <og-form-item label="Task">
        <og-text-input id="task-label"></og-text-input>
      </og-form-item>
      <og-button id="add" data-context="workflow" label="Add"></og-button>
    </div>
  </og-card>
  
</div>
body {
  font-family: Roboto;
  margin: 0px;
}

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

.hidden {
  display: none;
}

h4 {
  text-align: left;
}

hr {
  border-color: var(--OG-COLOR-SHADE--50);
  border-style: solid;
  border-width: var(--OG-BORDER-WIDTH) 0 0 0;
}

og-checkbox {
  margin-bottom: 10px;
  display: block;
}

.og-checkbox--checked {
  margin-top: 10px;
  margin-bottom: 0;
}

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

#cleanup {
  margin-top: 20px;
}

.toolbar {
  background-color: var(--OG-COLOR-SHADE--0--80);
  border-bottom: solid 1px var(--OG-COLOR-PRIMARY--100);
  height: 48px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
}
const body = document.querySelector('body');
const emptyNode = document.querySelector('#empty');

function checkboxHandler(event) {
  document.querySelector('hr.done')
    .insertAdjacentElement(`${event.detail ? 'afterEnd' : 'beforeBegin'}`, this);
  
  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;
  }
  let task = document.createElement('og-checkbox');
  task.setAttribute('label', name);
  if (checked) {
    task.toggleAttribute('checked');
  }
  
  task.addEventListener('changed', checkboxHandler);
  
  document.querySelector('hr.done')
    .insertAdjacentElement(`${checked ? 'afterEnd' : 'beforeBegin'}`, task);
  
  checkList();
}

// cleanup button
document.querySelector('#cleanup').addEventListener('clicked', e => {
  document.querySelectorAll('.og-checkbox--checked').forEach((task) => {
    task.parentNode.removeChild(task);
  });
});

// add button
document.querySelector('#add').addEventListener('clicked', 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);

// set default theme
body.setAttribute('class', 'og-theme--light');
// ================ code for switching themes ================
document.querySelector('#theme-switch').addEventListener('changed', e => {
  if (e.detail) {
    body.setAttribute('class', 'og-theme--dark');
  } else {
    body.setAttribute('class', 'og-theme--light');
  }
});
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