Edit on
<h1 class="intro">
	Design my day
	<span>by joacimnilsson.se</span>
</h1>
<ul class="timeline">
	<div class="name">Hours</div>
	<li>00</li>
	<li>01</li>
	<li>02</li>
	<li>03</li>
	<li>04</li>
	<li>05</li>
	<li>06</li>
	<li>07</li>
	<li>08</li>
	<li>09</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li>15</li>
	<li>16</li>
	<li>17</li>
	<li>18</li>
	<li>19</li>
	<li>20</li>
	<li>21</li>
	<li>22</li>
	<li>23</li>
</ul>
<ul class="thing template">
	<input type="text" class="name" value="Example">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<div class="remove">Remove</div>
</ul>
<div class="things">
<ul class="thing" value="#2AD33F">
	<input type="text" class="name" value="Sleeping">
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<li class="active" style="background: rgb(42, 211, 63);"></li>
	<div class="remove">Remove</div>
</ul><ul class="thing" value="#EDF11A">
	<input type="text" class="name" value="Travel">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(237, 241, 26);"></li>
	<li class="active" style="background: rgb(237, 241, 26);"></li>
	<li class="active" style="background: rgb(237, 241, 26);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(237, 241, 26);"></li>
	<li class="active" style="background: rgb(237, 241, 26);"></li>
	<li class="active" style="background: rgb(237, 241, 26);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<div class="remove">Remove</div>
</ul><ul class="thing" value="#D3412A">
	<input type="text" class="name" value="Working">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li class="active" style="background: rgb(211, 65, 42);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<div class="remove">Remove</div>
</ul><ul class="thing" value="#2D69E2">
	<input type="text" class="name" value="Eating">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li class="active" style="background: rgb(45, 105, 226);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<div class="remove">Remove</div>
</ul><ul class="thing" value="#D32AD1">
	<input type="text" class="name" value="Leisure">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li class="" style="background: rgb(51, 51, 51);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li class="active" style="background: rgb(211, 42, 209);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<div class="remove">Remove</div>
</ul>
<ul class="thing" value="#FB8F17">
	<input type="text" class="name" value="Codepen">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li class="active" style="background: rgb(251, 143, 23);"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<div class="remove">Remove</div>
</ul>
</div>
<div class="addThing">
	Add new thing +
</div>
$background: #1d1e20;
$darkerbackground: #333333;
$textcolor: #ffffff;
$primarycolor: #fd3e81;
$secendarycolor: #00ffd4;

body {
	background: $background;
	box-sizing: border-box;
	padding-top: 150px;
	padding-bottom: 50px;
	font-family: arial;
	min-width: 960px;
}

.intro {
	font-size: 30px;
	position: absolute;
	top: 60px;
	left: 140px;
	color: #fff;
	
	span {
		font-size: 15px;
		color: $secendarycolor;
	}
}

ul {
	user-select: none;
	
	.name {
		width: 85px;
		height: 20px;
		line-height: 20px;
		text-align: right;
		padding-right: 5px;
		margin-right: 5px;
		margin-left: 10px;
		box-sizing: border-box;
		color: $textcolor;
		float: left;
		cursor: default;
		font-size: 12px;
		background: transparent;
		border: 0;
		outline: 0;
		transition: .3s;
		border-radius: 2px;
	}
	
	input:hover {
		background: $darkerbackground!important;
		cursor: auto!important;
	}
}

.timeline {
	width: 100%;
	height: 20px;
	margin-bottom: 14px;
	
	li {
		display: block;
		float: left;
		width: 27px;
		height: 20px;
		background: $primarycolor;
		color: $textcolor;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
		margin-right: 3px;
		user-select: none;
		cursor: default;
		border-radius: 2px;
	}
}

.thing {
	width: 100%;
	height: 20px;
	margin-bottom: 4px;
	animation: load .5s ease-in;
	
	li {
		display: block;
		float: left;
		width: 7px;
		height: 20px;
		background: $darkerbackground;
		text-align: center;
		margin-right: 0px;
		border-right: 3px solid $background;
		cursor: pointer;
		border-radius: 0px;
		transition: .3s;
		
		&:hover {
			opacity: .5;
		}
	}
	
	.remove {
		color: $textcolor;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		cursor: pointer;
		padding: 0 10px;
		margin-left: 5px;
		background: $primarycolor;
		display: block;
		float: left;
		border-radius: 2px;
		opacity: .2;
		transition: .3s;
		user-select: none;
		
		&:hover {
			opacity: 1;
		}
	}
}

@keyframes load {
	from {
	 opacity: 0
	}
}

.template {
	display: none;
}

.addThing {
	color: $textcolor;
	font-size: 12px;
	width: 716px;
	transition: .3s;
	margin-left: 100px;
	text-align: center;
	border-radius: 2px;
	height: 30px;
	line-height: 30px;
	margin-top: 15px;
	cursor: pointer;
	
	&:hover {
		background: $darkerbackground;
	}
}
View Compiled
$(document).ready(function(){
	
	function editState(thing) {
		var thingColor = thing.parent().attr('value');
		if(!tooggleToTrue) {
			thing.removeClass('active');
			thing.css({
				'background':'#333333'
			});
		} else {
			thing.addClass('active');
			thing.css({
				'background':thingColor
			});
		}
	}
	
	var isDown = false;
	var toggleToTrue = false;
	
	$('.thing li')
		.mousedown(function() {
			isDown = true;
			tooggleToTrue = !$(this).hasClass('active');
		})
		.mouseup(function() {
			isDown = false;
		});
	
	$(document).on('mouseover', '.thing li', function(){
		if(isDown) {
			editState($(this));
		}
	});
	
	$(document).on('mousedown', '.thing li', function(){
		editState($(this));
	});
	
	var colors = [
		"#2AD33F", 
		"#EDF11A", 
		"#D3412A",
		"#2D69E2",
		"#D32AD1",
		"#5F4695",
		"#FB8F17",
		"#FFFFFF",
		"#00FFD4"
	];
	
	var itemAdded = 0;
	
	$('.addThing').click(function(){
		$(".template")
			.clone(true, true)
			.removeClass('template')
			.attr('value', colors[itemAdded])
			.appendTo(".things");
		
		if(itemAdded == 8) {
			itemAdded = 0;
		} else {
			itemAdded++;
		}
	});
	
	$(document).on('click', '.remove', function(){
		$(this).parent().fadeOut(500, function() { 
			$(this).remove();
		});
	});
});
Rerun