NNbxEV

index.html

	<div class="todo-wrapper">
		<div class="add-new-item">
			<input class="new-item-text" type="text" placeholder="Add New Task" value="">
			<button class="submit-button">+</button>
		</div>	
		<ul class="item-list"></ul>
	</div>	

NNbxEV.markdown

NNbxEV

Forked from Aaron Baker's Pen jPZBNK.

A Pen by JBreit on CodePen.

License.

script.js

	"use strict";
	var lists = document.getElementsByClassName('todo-wrapper');
	class TodoList {

		constructor (iterator){
			this.list = [];
			this.listName = 'list-' + iterator + '-';
			this.listNumber = iterator;
			this.listSetup();
		}

		listSetup (){
			document.getElementsByClassName('submit-button')[this.listNumber].addEventListener('click', this.addNewItem.bind(this));
			document.getElementsByClassName('new-item-text')[this.listNumber].addEventListener('keyup', this.addNewItem.bind(this));
			if (localStorage[this.listName + 'es6']){
				var list = JSON.parse(localStorage.getItem(this.listName + 'es6'));
				for (var i = 0; i < list.length; i++) {
					this.list.push(list[i]);
					this.addListElement(list[i].item);
				};
			}						
		}

		addNewItem (event){	
			if (event.type === 'keyup' && event.keyCode !== 13){
				return;
			}

			var itemText = document.getElementsByClassName('new-item-text')[this.listNumber].value;		
			if (itemText != ''){		
				this.addListElement(itemText);
				this.list.push({'item' : itemText, 'state' : 'not-completed'});		
				localStorage.setItem(this.listName + 'es6', JSON.stringify(this.list));		
				document.getElementsByClassName('new-item-text')[this.listNumber].value = '';
			}
		}	

		addListElement (value){
			if (value != ''){
				var childLength = document.getElementsByClassName('item-list')[this.listNumber].children.length;
				var item = document.createElement('li');
				item.id = this.listName + 'item-' + childLength;
				item.setAttribute('data-index', childLength);
				var itemValue = document.createElement('span');
				itemValue.innerHTML = value;
				item.appendChild(itemValue);
				document.getElementsByClassName('item-list')[this.listNumber].appendChild(item);		
				this.addDeleteBtn(item, childLength);
				this.addCompleteBtn(item, childLength);
			}
		}
		
		addDeleteBtn (elem, index){
			var deleteBtn = document.createElement('div');
			deleteBtn.id = this.listName + 'delete-btn-' + index;
			deleteBtn.className = 'delete-btn';
			deleteBtn.setAttribute('data-index', index);
			deleteBtn.innerHTML = "+";
			document.getElementById(elem.id).appendChild(deleteBtn);
			deleteBtn.addEventListener('click', this.deleteItem.bind(this));				
		}	

		addCompleteBtn (elem, index){
			var completeBtn = document.createElement('div');
			var completedState = (typeof(this.list[index]) === 'undefined' || this.list[index].state == 'not-completed') ? 'not-completed' : 'completed';
			completeBtn.id = this.listName + 'complete-btn-' + index;	
			completeBtn.className = 'complete-btn ' + completedState;
			completeBtn.setAttribute('data-index', index);
			document.getElementById(elem.id).appendChild(completeBtn);
			completeBtn.parentElement.className = completedState;
			completeBtn.addEventListener('click', this.completeItem.bind(this));		
		}
		
		completeItem (e){
			var selectedIndex = e.target.getAttribute('data-index');
			this.list[selectedIndex].state = (this.list[selectedIndex].state == 'completed') ? 'not-completed' : 'completed';
			e.target.className = 'complete-btn ' + this.list[selectedIndex].state;
			e.target.parentElement.className = this.list[selectedIndex].state;			
			// e.target.parentNode.className = e.target.parentNode.className + ' ' + this.list[selectedIndex].state;
			var nodeToComplete = document.getElementById(this.listName +'item-'+selectedIndex);		
			localStorage.setItem(this.listName + 'es6', JSON.stringify(this.list));	
		}	

		deleteItem (e){
			var selectedIndex = e.target.getAttribute('data-index');
			var nodeToDelete = document.getElementById(this.listName + 'item-'+selectedIndex);
			this.list.splice(selectedIndex, 1);
			nodeToDelete.parentNode.removeChild(nodeToDelete);				
			localStorage.setItem(this.listName + 'es6', JSON.stringify(this.list));	
		}				
	}

	for (var i = 0; i < lists.length; i++) {
		new TodoList(i);
	};

style.css

		body {
			background: #F9F9F9;
			font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
			font-weight: 300;			
		}
		.todo-wrapper {
			width: 40%;
			min-width: 500px;
			margin: 0 auto 50px;
		}
		.item-list {
			background: #EEE;
			padding: 0;
			box-shadow: 0 0 100px 0px rgba(0,0,0,0.2);			
		}
		.item-list li {
			list-style: none;
			padding: 15px 20px;
			border-bottom: 1px solid #DDD;
			height: 55px;			
			box-sizing: border-box;
		}
		.item-list li.completed {
			background: #8BEA8B;
			border-color: #60DB60;
			transition: all, .3s, ease-out;
			-webkit-transition: all, .3s, ease-out;						
		}		
		.add-new-item:after{
			content: "";
			clear: both;
			display: block;
		}
		.new-item-text {
			float: left;
			width: 85%;
			height: 60px;
			padding: 0 20px;
			font-size: 14px;
			border: 0;
			background: #EEE;
			border: 1px solid #DDD;				
			outline: none;	
			transition: all, .3s, ease-out;
			-webkit-transition: all, .3s, ease-out;			
			box-sizing: border-box;
		}

		.new-item-text:focus {
			background: #FAFAFA;
			border: 1px solid #DDD;					
		}
		.submit-button {
			float: right;
			width: 15%;
			height: 60px;
			border: none;
			background: #DDD;
			outline: none;
			color: #13C013;
			font-size: 28px;
			font-weight: bold;
			line-height: 1em;
			transition: all, .5s, ease-out;	
			-webkit-transition: all, .3s, ease-out;									
		}
		.submit-button:hover {
			background: #13C013;
			color: #FFF;
			cursor: pointer;			
			transition: all, .3s, ease-out;
			-webkit-transition: all, .3s, ease-out;			
		}
		.complete-btn {
			width: 20px;
			height: 20px;
			border: 1px solid #CCC;
			float: left;
			margin-right: 20px;
			cursor: pointer;
			transition: all, .3s, ease-out;	
			-webkit-transition: all, .3s, ease-out;					
		}
		.complete-btn.completed {
			background: #13C013;
			border: 1px solid #13C013;
		}
		.delete-btn {
			float: right;
			cursor: pointer;
			width: 35px;
			height: 35px;
			font-size: 32px;
			text-align: center;
			line-height: 1em;
			margin-top: -9px;
			position: relative;
			left: -4px;
			color: #999;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transition: all, .3s, ease-out;
			-webkit-transition: all, .3s, ease-out;
		}
		.delete-btn:hover {
			color: red;
		}