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;
})
})
})
This Pen doesn't use any external CSS resources.