ToDo List MaterializeCSS

ToDo List Implementation materializecss.com

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="input-field inline">
  <input id="text" type="text" class="validate">
  <label for="text">Enter a new task here</label>
</div>
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
<div class="todo-list card" materialize>
  <div class="header light-blue darken-2 white-text">
    <span>ToDo List</span>
  </div>
  <div class="item completed">
    <input checked="checked" type="checkbox" id="todo1" />                                   
    <label for="todo1">Learn React</label>
  </div>
  <div class="item">
    <input type="checkbox" id="todo2" />
    <label for="todo2">Forget React</label>
  </div>
</div>
<a class="waves-effect waves-light light-blue darken-2 btn filter disabled">All</a>
<a class="waves-effect waves-light light-blue darken-2 btn filter">Done</a>
<a class="waves-effect waves-light light-blue darken-2 btn filter">Active</a>



<div>
</div>

SCSS

body {
  background-color: #fafafa;
  padding: 2em;
  .todo-list {
    .header,
    .item {
      padding: 1em;
    }
    .header {
      font-size: 1.5em;
    }
    .item {
      cursor: pointer;
      &:hover {
        background-color: #f3f3f3;
      }
      &:not(.completed) {}
      &.completed {
        >label {
          text-decoration: line-through;
        }
      }
    }
  }
}

JavaScript

const skipRegex = /\blink\b|\bscript\b/;

const handle = (el) => {
	const $el = $(el);
	const name = $el.prop("tagName");
  if (skipRegex.test(name)){
  	return;
  }
  
	$(el).children().each((i, kid) => {
  	handle(el);
  });
	if (name === "BODY"){
  	return;
  }
  
  // parse
  const text = el.childNodes.every(e => e.nodeType === 3)
  	? el.childNodes[0].nodeValue
    : undefined;
  const classNames = el.classList.value.replace(/\s+/g,' ').trim().split(' ');
  const outerHTML = el.outerHTML;
  
};

handle($("body"));