heading if only i actually took notes like this:

note
  todo o
  text(contenteditable) a brand new task
note
  todo.started o
  text(contenteditable) here is a task that i started
  note
    todo.halfway o
    text(contenteditable) a sub-task
  note
    todo.started o
    text(contenteditable) another sub-task
note
  todo.halfway o
  text(contenteditable) halfway done or pending
note
  todo.done o
  text(contenteditable) this task is done
note
  todo.canceled o
  text(contenteditable) cancel a task by finishing the cross
View Compiled
@import url('https://fonts.googleapis.com/css?family=Walter+Turncoat');

$pen: #37373c;

body{
  font-family: 'Walter Turncoat', cursive;
  font-size: 2.5em;
  padding:1em;
  background-size: 1em 1em;
  background-image: radial-gradient(circle, rgba(0,50,255,0.2) 1px, rgba(black, 0) 2px);
  background-position:.3em .62em;
}

heading{
  display:block;
  line-height:1.001em;
  color: $pen;
  margin-bottom:1em;
}

note{
  display:block;
  line-height:1.001em;
  color: $pen;
  margin-left:1em;
  
  text{
    margin-left: 1.25em;
    display: flex;
    margin-top: -1em;
    outline:none;
  }
  
  todo{
    display:inline-block;
    position:relative;
    transform:scale(1.3);
    cursor:pointer;
    user-select: none;
    
    &.started{
      &:before{
        content:'|';
        position:absolute;
        transform:rotate(45deg);
        top:8%;
        left:30%;
      }
    }
    
    &.canceled{
      &:before{
        content:'|';
        position:absolute;
        transform:rotate(45deg);
        top:8%;
        left:30%;
      }
      
      &:after{
        content:'|';
        position:absolute;
        transform:rotate(-45deg);
        top:9%;
        left:30%;
      }
    }
    
    &.halfway{
      &:before{
        content:'|';
        position:absolute;
        transform:rotate(45deg);
        top:8%;
        left:30%;
      }
      
      &:after{
        content:'';
        position:absolute;
        width:.5em;
        height:1em;
        background:rgba($pen,0.95);
        display:block;
        border-radius:0 1em 1em 0;
        top:18%;
        left:20%;
        transform:scale(0.5) rotate(45deg);
      }
    }
    
    &.done{
      &:before{
        content:'|';
        position:absolute;
        transform:rotate(45deg);
        top:8%;
        left:30%;
      }
      
      &:after{
        content:'';
        position:absolute;
        width:1em;
        height:1em;
        background:rgba($pen,0.95);
        display:block;
        border-radius:50%;
        top:8%;
        left:-40%;
        transform:scale(0.45);
      }
    }
  }
}
View Compiled
let doc = document, statuses = ['undefined', 'started', 'halfway', 'done', 'canceled'];

doc.querySelectorAll('todo').forEach((el) => {
  el.addEventListener('click', (e) => {
    statuses.every((status, index) => {
      if (e.target.classList.contains(status)){
        e.target.classList.replace(status, statuses[index+1 > statuses.length ? 0 : index+1]);
        return false;
      }else if(!e.target.classList.length || e.target.classList.contains('undefined')){
        e.target.classList.add(statuses[1]);
        return false;
      }else return true;
    })
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/tonybanik/pen/3f837b2f0085b5125112fc455941ea94.js