<div class="container">
  <h1> Your To-Do List</h1>
  
  <div class="add-item">
    <input type="text" id="newItem">
    <button id="add">Add</button>
  </div>
  
  <div class="items" id="items">
      <input type="checkbox"> First item<br>
      <input type="checkbox"> Second item<br>
      <input type="checkbox"> Third item<br>
      <input type="checkbox"> Fourth item<br>
  </div>
  
  <div class="progress-bar" id="progress-bar">
    <div class="bar">
      <div class="progress" id="progress"></div>
      <p>You're <span id="percent">0</span>% done with your project!</p>
    </div>
  </div>
</div>

h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  text-align: center;
}

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}

.add-item {
  margin: 0 auto;
  text-align: center;
}

.add-item input {
  height: 30px;
  width: 250px;
  margin-top: 20px;
}

button {
  height: 35px;
  width: 40px;
  border-radius: 2px;
  background: red;
  border: none;
  color: #fff;
}

.items {
  height: 250px;
  width: 300px;
  margin: 40px auto 0 auto;
  overflow-y: auto;
}

.items input {
  font-size: 40px;
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.bar {
  margin: 0 auto;
  width: 400px;
  height: 10px;
  border: 1px solid gray;
}

.progress {
  width: 0;
  height: 10px;
  background-color: red;
}

.bar p {
  margin-top: 20px;
  text-align: center;
}

.percent {
  display: inline;
}

var countChecked =  function() {
  var totalItems = $('#items input').length;
  var checkedItems = $('#items input:checked').length;
  var progress = checkedItems / totalItems;
  var progressTotal = ($('#progress-bar').css("width")).slice(0,3);
  var progressPixels = (progress * progressTotal).toString() + "px";
  
  $('#percent').text(Math.floor(progress * 100));
  $('#progress').css("width", progressPixels);
}

$("input[type=checkbox]").on("click", countChecked);

$('#add').click(function() {
  var newItem = $("#newItem").val();
  var appendItem = "<input type='checkbox'> " + newItem + "</input><br>";
  
  // $('#items').append(appendItem);
  $(appendItem).appendTo("#items:last");
 	countChecked()
})