Todo Object to Div

dabblet.css

/**
 * Todo Object to Div
 */
body{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}
#holder{
	position: absolute;
	height: 33.33%;
	width: 60%;
	margin: auto;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	background-color: rgba(200,200,200,0.3);
	box-shadow: 5px 5px 25px black;
	border-radius: 0.5rem;
}

.todo{
	display: inline-block;
}
.circle{
	display: inline-block;
	height: 1.5rem;
	width: 1.5rem;
	border: 1px solid black;
	border-radius: 50%;
	color: green;
	color: transparent;	
	text-align: center;
}

.checkComplete{
	color: green;
}
.todoComplete{
	opacity: 0.3;
	text-decoration: line-through;
}

dabblet.html

<div id="holder">
	<center>

	<center>
</div>

dabblet.js

//Goal: place these todos
// in the "holder" on the screen
let todos = [
	{
		todo: "Wash the car",
		completed: false
	},
	{
		todo: "Do the Laundry",
		completed: true
	},
	{
		todo: "Finish your homework",
		completed: false
	}
];
var holder = document.querySelector("#holder");
const CHECK = "✓";
const SPACE = " ";	
holder.innerHTML = "";
todos.forEach(todo=>{
	//build a todo div
	var carrier = document.createElement('div');
	var circleDiv = document.createElement('div');
	var todoDiv = document.createElement('div');
	//place the circleDiv and the todoDiv inside the carrier
	carrier.appendChild(circleDiv);
	carrier.appendChild(todoDiv);
	//http://stackoverflow.com/questions/10951340/create-a-blank-html-space-on-the-fly-javascript
	circleDiv.innerHTML = CHECK;
	todoDiv.innerHTML = todo.todo;
	circleDiv.classList.add("circle");
	todoDiv.classList.add("todo");	
	//place this carrier onto the screen	
	holder.appendChild(carrier);
});
todos.forEach(todo=>{
	//build a todo div
	var carrier = document.createElement('div');
	var circleDiv = document.createElement('div');
	var todoDiv = document.createElement('div');
	//place the circleDiv and the todoDiv inside the carrier
	carrier.appendChild(circleDiv);
	carrier.appendChild(todoDiv);
	//http://stackoverflow.com/questions/10951340/create-a-blank-html-space-on-the-fly-javascript
	circleDiv.innerHTML = CHECK;
	todoDiv.innerHTML = todo.todo;
	circleDiv.classList.add("circle", "checkComplete");
	todoDiv.classList.add("todo", "todoComplete");	
	//place this carrier onto the screen	
	holder.appendChild(carrier);
});

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"css"}