Todo Lists

by Bilal Zafar

HTML

<div class="todo">
  <div class="todo--header">
    <div class="todo--menu">
      <div class="todo--title">
        ToDo List
      </div>
      <div class="todo--new -visible">
        <svg fill="none" viewBox="0 0 32 32" height="20" width="20">
          <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
        </svg>
      </div>
    </div>
    <div class="todo--date">
      <div class="todo--weekday">
        Monday
      </div>
      <div class="todo--fulldate">
        December 5, 2016
      </div>
    </div>
  </div>
  <div class="todo--body">
    <ul id="todo--items" class="todo--items"></ul>
  </div>
  <div class="todo--add">
    <textarea id="todo--input" class="todo--input" placeholder="What should I do..."></textarea>
      <div id="todo--create" class="todo--create">
        <svg fill="none" viewBox="0 0 32 32" height="20" width="20">
          <path class="path1" d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
        </svg>
      </div>      
  </div>  
</div>

CSS

body {
  background-image: linear-gradient(#3498db, #2b3d52);
  color: #497081;
}
.todo {
  background-color: #ffffff;
}
.todo--menu {
  color: #e5e5e5;
  background-color: #2b3d52;
}
.todo--menu .todo--title {
  text-align: center;
  padding-top: 20px;
}
.todo--date {
  border-bottom: 1px solid #d4dce0;
  margin: 0px 20px;
  padding: 15px 0px;
  text-align: center;
}
.todo--date .todo--weekday {
  font-weight: 600;
  font-size: 1.6em; 
}
.todo--date .todo--fulldate {
  font-size: 1em; 
}
.todo--body {
  
}
.todo--items {
   padding: 0;
   margin: 0px 20px;
  padding: 20px 0px;
}
.todo--item {
  display: flex;
  padding: 3px 0px;
}
.todo--item::before {
  /*content: '\25CF';*/
}
.todo--item.-done::before {
  /*content: '\2713';*/
}
.todo--button {
  width: 20px;
}
.todo--text {
  margin-left: 20px;
}
.todo--delete {
  position: absolute;
  right: 20px;
}
.todo--add {
  margin: 0px 20px;
}
.todo--add {
  display: flex;
}
.todo--input {
  width: 90%;
  border: 2px solid #2b3d52;
  border-radius: 4px;
}
.todo--create {
  width: 10%;
  display: flex;
  justify-content: right;
  align-items: center;
}
.todo--create svg {
  fill: #2b3d52;
}

JavaScript

let listItems = ["Solve the task", "CodeFight On"];

function removeListItem(liElement) {
	console.log(liElement);
}

function renderListContainer() {
	let listContainer = document.getElementById("todo--items");
  listItems.forEach(function(entry) {
    const liElement = document.createElement('li');
    liElement.classList.add("todo--item");
    liElement.classList.add("-done");
    liElement.innerHTML = '<div class="todo--button"> <svg id="todo--circle" class="todo--circle" height="26" width="26"><circle cx="13" cy="13" r="10" stroke="black" fill="white" stroke-width="3" /></svg> </div><div class="todo--text"> ' + entry + '</div><div class="todo--delete"> <svg width="24px" height="24px" viewBox="0 0 24 24"> <g transform="scale(0.015 0.015)"> <path d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM512 928c-229.75 0-416-186.25-416-416s186.25-416 416-416 416 186.25 416 416-186.25 416-416 416z"></path> <path d="M672 256l-160 160-160-160-96 96 160 160-160 160 96 96 160-160 160 160 96-96-160-160 160-160z"></path> </g> </svg></div>';
    listContainer.appendChild(liElement);
    listItems = [];
	});
}

function addListItem() {
	let listValue = document.getElementById("todo--input").value;
	listItems.push(listValue);
  renderListContainer();
}

function markChecked() {
	
}


renderListContainer();

document.getElementById("todo--create").addEventListener("click", addListItem);