LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Please enter a task
    CSS
    .tasker ul, .tasker li,
    .tasker .error,
    .tasker button,
    .tasker input {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      background: transparent;
    }
    
    .tasker-header button, .tasker-body .task button {
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
    }
    
    body {
      background: #f1f1f1;
      margin-top: 2rem;
    }
    
    /*PEN STYLES*/
    .tasker {
      max-width: 400px;
      margin: 0 auto;
    }
    .tasker .error {
      display: none;
      background: rgba(237, 28, 36, 0.7);
      color: #fff;
      padding: 14px;
      margin-bottom: 10px;
      border-radius: 5px;
      text-align: center;
    }
    .tasker ul {
      background: #fff;
    }
    .tasker li,
    .tasker .error,
    .tasker button,
    .tasker input {
      font: 18px/1.25em Helvetica, Arial, Sans-serif;
    }
    
    .tasker-header {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      background: #313e50;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      width: 100%;
    }
    .tasker-header input,
    .tasker-header button {
      color: #fff;
      box-sizing: border-box;
      font-size: 1.25em;
      padding: 14px;
    }
    .tasker-header input {
      -webkit-box-flex: 2;
          -ms-flex-positive: 2;
              flex-grow: 2;
    }
    .tasker-header button {
      background: #1dd2af;
      border-left: 1px solid #1eddb8;
    }
    .tasker-header button:hover {
      background: #20e7c1;
    }
    
    .tasker-body .task {
      display: block;
      position: relative;
      padding: 14px 40px 14px 14px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .tasker-body .task:last-child {
      border-bottom: none;
    }
    .tasker-body .task:hover > button {
      opacity: 1;
    }
    .tasker-body .task.completed {
      color: #cdcdcd;
      text-decoration: line-through;
    }
    .tasker-body .task input {
      margin-right: 10px;
    }
    .tasker-body .task button {
      color: #cdcdcd;
      margin: 14px;
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
    }
    .tasker-body .task button:hover {
      color: #ed1c24;
    }
    
    JS
    (function() {
    	'use strict';
    	var tasker = {
    		init: function() {
    			this.cacheDom();
    			this.bindEvents();
    			this.evalTasklist();
    		},
    		cacheDom: function() {
    			this.taskInput = document.getElementById("input-task");
    			this.addBtn = document.getElementById("add-task-btn");
    			this.tasklist = document.getElementById("tasks");
    			this.tasklistChildren = this.tasklist.children;
    			this.errorMessage = document.getElementById("error");
    		},
    		bindEvents: function() {
    			this.addBtn.onclick = this.addTask.bind(this);
    			this.taskInput.onkeypress = this.enterKey.bind(this);
    		},
    		evalTasklist: function() {
    			var i, chkBox, delBtn;
    			//BIND CLICK EVENTS TO ELEMENTS
    			for (i = 0; i < this.tasklistChildren.length; i += 1) {
    				//ADD CLICK EVENT TO CHECKBOXES
    				chkBox = this.tasklistChildren[i].getElementsByTagName("input")[0];
    				chkBox.onclick = this.completeTask.bind(this, this.tasklistChildren[i], chkBox);
    				//ADD CLICK EVENT TO DELETE BUTTON
    				delBtn = this.tasklistChildren[i].getElementsByTagName("button")[0];
    				delBtn.onclick = this.delTask.bind(this, i);
    			}
    		},
    		render: function() {
    			var taskLi, taskChkbx, taskVal, taskBtn, taskTrsh;
    			//BUILD HTML
    			taskLi = document.createElement("li");
    			taskLi.setAttribute("class", "task");
    			//CHECKBOX
    			taskChkbx = document.createElement("input");
    			taskChkbx.setAttribute("type", "checkbox");
    			//USER TASK
    			taskVal = document.createTextNode(this.taskInput.value);
    			//DELETE BUTTON
    			taskBtn = document.createElement("button");
    			//TRASH ICON
    			taskTrsh = document.createElement("i");
    			taskTrsh.setAttribute("class", "fa fa-trash");
    			//INSTERT TRASH CAN INTO BUTTON
    			taskBtn.appendChild(taskTrsh);
    
    			//APPEND ELEMENTS TO TASKLI
    			taskLi.appendChild(taskChkbx);
    			taskLi.appendChild(taskVal);
    			taskLi.appendChild(taskBtn);
    
    			//ADD TASK TO TASK LIST
    			this.tasklist.appendChild(taskLi);
    
    		},
    		completeTask: function(i, chkBox) {
    			if (chkBox.checked) {
    				i.className = "task completed";
    			} else {
    				this.incompleteTask(i);
    			}
    		},
    		incompleteTask: function(i) {
    			i.className = "task";
    		},
    		enterKey: function(event) {
    			if (event.keyCode === 13 || event.which === 13) {
    				this.addTask();
    			}
    		},
    		addTask: function() {
    			var value = this.taskInput.value;
    			this.errorMessage.style.display = "none";
    
    			if (value === "") {
    				this.error();
    			} else {
    				this.render();
    				this.taskInput.value = "";
    				this.evalTasklist();
    			}
    		},
    		delTask: function(i) {
    			this.tasklist.children[i].remove();
    			this.evalTasklist();
    		},
    		error: function() {
    			this.errorMessage.style.display = "block";
    		}
    	};
    
    	tasker.init();
    }());
    Host Instantly Drag and Drop Website Builder

     

    Description

    I've seen alot of different to do list web apps and all used newer JS libraries which is fine but I've been working on bettering my understanding of plain JavaScript and this is what I created.
    Term
    Mon, 11/27/2017 - 21:51

    Related Codes

    Pen ID
    Pen ID
    Pen ID