JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//use.fontawesome.com/05799db3cf.js"></script>
<div class="header">
  <label class="title">To-Do List</label>
  <label>
    <input id="showCompleted" type="checkbox" checked> Show completed</label>
</div>
<button id="addTodo" class="btn sb-btn-primary">+</button>
<div id="todo">

  <ul id="urgent" class="todo-list ui-helper-reset">
    <div class="new-todo hidden">
      <div class="new-todo-table">
        <div class="header-field">
          <div class="form-group">
            <label for="project">
              <input type="checkbox" id="project"> Project
            </label>
          </div>
          <div class="form-group">
            <label for="due">Due </label>
            <input type="text" id="due">
          </div>
        </div>
        <div class="body-field">
          <input class="general-todo" type="text" placeholder="Add a new to-do">
          <div class="project-todo hidden">
            <div class="form-group">
              <label for="searchProject">Project</label>
              <input type="text" id="searchProject">
            </div>

            <div class="form-group">
              <label for="step">Step</label>
              <select id="step">
                <option>1. Send a Letter of engagement</option>
                <option>2. Agreement acknowledgement</option>
              </select>
            </div>

            <div class="form-group">
              <label for="note">Note</label>
              <textarea rows="2" id="note"></textarea>
            </div>

          </div>
        </div>
        <div class="footer-field">
          <button id="save" class="btn btn-primary">Save</button>
          <button id="cancel" class="btn btn-default">Cancel</button>
        </div>
      </div>
    </div>
    <li class="ui-state-default">
     ...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  padding: 20px;
}

ul {
  list-style: none;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-right: 20px;
  margin-bottom: 10px;
}

button.ui-datepicker-trigger {
  background: none;
  box-shadow: none;
  border: none;
}

.btn-primary {
  background: #0E68C5;
}

.sb-btn-primary {
  font-size: 30px;
  font-weight: 600;
  border: 1px solid #B9C4D3;
  background: #fff;
  color: #0E68C5;
  width: 44px;
  padding: 0;
  float: left;
  display: block;
}

.sb-btn-primary:hover {
  color: #0E68C5;
}

.header,
#todo {
  margin-left: 56px;
}

.todo-list {
  margin: 0;
  display: block;
}

.todo-list li {
  padding: 2px 12px;
  font-size: 13px;
  background: none;
  border: 0;
}

.todo-list li:hover {
  background: #eaeaea;
}

#todo {
  background: #F7F7F7;
}

#urgent {
  background: #FFDADA;
}

#urgent li:hover {
  background: #FFBEBE;
}

#completed {
  color: #888;
  padding: 0;
}

#completed h6 {
  padding: 0 16px;
}

#completed li {
  padding: 5px 16px;
}

#completed li label {
  text-decoration: line-through;
}

.new-todo {
  padding: 20px;
}

.new-todo-table {
  display: table;
  width: 100%;
  background: #fff;
  padding: 20px 20px 0;
}

.new-todo .header-field {
  display: table;
  width: 100%;
}

.new-todo .header-field > div {
  display: table-cell;
  width: 50%;
}

.new-todo .header-field > div:last-child {
  text-align: right;
}

.new-todo .body-field {
  margin-top: 10px;
}

.new-todo .body-field .general-todo {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ccc;
  height: 40px;
  padding: 5px 10px;
}

.new-todo .body-field .project-todo {
  padding: 20px 20px 0;
}

.new-todo .body-field .project-todo .form-group {
  display: table;
  width: 100%;
}

.new-todo .body-field .project-todo .form-group>* {
  display: table-cell;
  vertical-align: top;
}

.new-todo .body-field .project-todo .form-group>label {
 ...

JavaScript

$("#urgent, #normal").sortable({
  connectWith: '.todo-list'
}).disableSelection();

$("body").on('click', '#addTodo', function(e) {
  e.preventDefault();
  $(".new-todo").removeClass('hidden');
});
$(".new-todo").on('click', '#cancel', function(e) {
  e.preventDefault();
  $(".new-todo").addClass('hidden');
});

$("#todo li input[type=checkbox]").change(function(e) {
  e.preventDefault();
  var completed = $(this).closest('label')
                          .clone()
                          .children()
                          .remove()
                          .end()
                          .text();
                          
  $('#completed').append("<li><label>"+completed+"</label></li>");
  $(this).closest('li').fadeOut();
});

$("#showCompleted").change(function() {
  if (this.checked) {
    $("#completed").removeClass('hidden');
  } else {
    $("#completed").addClass('hidden');
  }
});

$("#project").change(function() {
  if (this.checked) {
    $(".project-todo").removeClass('hidden');
    $(".general-todo").addClass('hidden');
  } else {
    $(".project-todo").addClass('hidden');
    $(".general-todo").removeClass('hidden');
  }
});

$("#due").datepicker({
  dateFormat: 'dd/mm/yy',
  showOn: "button",
  buttonText: "<i class='fa fa-calendar'></i>"
    /*
    buttonImage: "images/calendar.png",
    buttonImageOnly: true,
    buttonText: "Select date"
    */
}).datepicker('setDate', new Date());