can add task now

function.js

-
-//var i = 0;
-/*
-//add new row to list after submitting
-function addRow(){
-    if (document.getElementById('add-task').value!=''){ 
-        i++;
-        var title = document.getElementById('add-task').value;
-        var node = document.createElement('div'); 
-        node.innerHTML = '<input id="' + i + '" type="checkbox" class="hidden" name="checkbox"><label for="' + i + '" class="check--label"><span class="check--label-box"></span><span class="check--label-text">'+ title +'</span>';      
-	var lastElement = parseInt(document.getElementById("doList").lastElementChild.getAttribute("id"));
-	if (!isNaN(lastElement)) {
-          node.setAttribute("id", lastElement + 1);  
-	}
-        else {
-	  node.setAttribute("id", 0);
-	}
-	$.ajax({
-	  dataType: 'JSON',
-	  url: 'get-id.php',
-	  success: function(data){
-	})
-        //node.setAttribute("id", new_id);
-	document.getElementById('doList').appendChild(node);    
-    }
-}
-*/
-
 //delete all tasks
 //delete all tasks
 function deleteAll() {
 function deleteAll() {
     var e = document.getElementById("doList");
     var e = document.getElementById("doList");
@@ -59,17 +31,13 @@ $("#imageUpload").change(function() {
     readURL(this);
     readURL(this);
 });
 });
 
 
-
+//display input from database
 $(document).ready(function() {
 $(document).ready(function() {
-  //display input from the database
   $.ajax({
   $.ajax({
     dataType: 'JSON',
     dataType: 'JSON',
     url: 'display.php',
     url: 'display.php',
     success: function(data) {
     success: function(data) {
-      //var items = [];
       $.each( data, function(key, val) {
       $.each( data, function(key, val) {
-        //i++;
-	//var title = val
 	var node = document.createElement('div');
 	var node = document.createElement('div');
 	node.innerHTML = '<input id="' + key + '" type="checkbox" class="hidden" name="checkbox"><label for="' + key + '" class="check--label"><span class="check--label-box"></span><span class="check--label-text">' + val + '</span>';
 	node.innerHTML = '<input id="' + key + '" type="checkbox" class="hidden" name="checkbox"><label for="' + key + '" class="check--label"><span class="check--label-box"></span><span class="check--label-text">' + val + '</span>';
 	document.getElementById('doList').appendChild(node);
 	document.getElementById('doList').appendChild(node);
@@ -77,35 +45,11 @@ $(document).ready(function() {
     }
     }
   });
   });
 });
 });
-/*	
-  //add id into the each task after load page
-  $.ajax({
-    dataType:'JSON',
-    url: 'add-id.php',
-    success: function(data) {
-      var i = 0;
-      var id = [];
-      $.each(data, function(key, val) {
-        id.push(val);
-      })
-      $('#doList').children('div').each(function () {
-        if($(this).attr('class') == "progress-container") { return; }
-	else {
-	  $(this).attr('id', id[i]);
-	  i++;
-	}
-      })
-    }
-  });	
-});
-*/
 
 
 //delete completed tasks
 //delete completed tasks
 $(document).ready(function() {
 $(document).ready(function() {
   $('#delete-complete').click(function() {
   $('#delete-complete').click(function() {
-    $("input.hidden:checkbox:checked").each(function() {
-      //$(this).parent().remove();
-      
+    $("input.hidden:checkbox:checked").each(function() { 
       $.ajax({
       $.ajax({
         type: "GET",
         type: "GET",
         url: "delete-complete.php",
         url: "delete-complete.php",

function1.js

 //add user input to database
 //add user input to database
 $("#addAction").submit(function(event) {
 $("#addAction").submit(function(event) {
   event.preventDefault();	    
   event.preventDefault();	    
-  var task = $("#add-task").val();	 
+  var task = $("#add-task").val();
+  if (task == '') return;
   $.ajax({
   $.ajax({
     url: "insert.php",
     url: "insert.php",
     type:"POST",
     type:"POST",
     data:{
     data:{
       "task": task },
       "task": task },
     success: function(data) {
     success: function(data) {
-      $("#add-task").val("");
       var new_id = data;
       var new_id = data;
-      if (document.getElementById('add-task').value='') {
-        var title = document.getElementById('add-task').value();
+      if (document.getElementById('add-task').value!='') {
+        var title = document.getElementById('add-task').value;
 	var node = document.createElement('div');
 	var node = document.createElement('div');
 	node.innerHTML = '<input id="' + new_id + '" type="checkbox" class="hidden" name="checkbox"><label for="' + new_id + '" class="check--label"><span class="check--label-box"></span><span class="check--label-text">' + title + '</span>';
 	node.innerHTML = '<input id="' + new_id + '" type="checkbox" class="hidden" name="checkbox"><label for="' + new_id + '" class="check--label"><span class="check--label-box"></span><span class="check--label-text">' + title + '</span>';
-	node.setAttribute("id", new_id);
 	document.getElementById('doList').appendChild(node);
 	document.getElementById('doList').appendChild(node);
       }
       }
+      $("#add-task").val("");	    
     }
     }
   });
   });
 });
 });
@@ -34,6 +34,12 @@ input.addEventListener("keyup", function(event) {
 $("#delete-button").click(function() {
 $("#delete-button").click(function() {
   $.ajax({
   $.ajax({
     url: "delete-all.php",
     url: "delete-all.php",
-    type: "POST"
+    type: "POST",
+    success: function(data) {
+      var e = document.getElementById("doList");
+      while(e.firstChild) {
+        e.removeChild(e.firstChild);
+      }
+    }
   });
   });
 });
 });

index.php

@@ -53,7 +53,7 @@ if(!isset($_SESSION['loggedin'])) {
             <form action="dbconnection.php" method="POST" id="addAction">
             <form action="dbconnection.php" method="POST" id="addAction">
               <input type="text" id="add-task" onkeypress="return event.keyCode != 13" name="add-task" placeholder="Add tasks..." autocomplete="off">
               <input type="text" id="add-task" onkeypress="return event.keyCode != 13" name="add-task" placeholder="Add tasks..." autocomplete="off">
               <!--<input type="submit" class="add-button" id="add" onclick="insert(); addRow(); onFormSubmit();" name="add-button" value="Add">-->
               <!--<input type="submit" class="add-button" id="add" onclick="insert(); addRow(); onFormSubmit();" name="add-button" value="Add">-->
-      	      <input type="submit" class="add-button" id="add" onclick="addRow();" onkeypress="return searchKeyPress(event);" name="add-button" value="Add">
+      	      <input type="submit" class="add-button" id="add" onkeypress="return searchKeyPress(event);" name="add-button" value="Add">
 	   </form>
 	   </form>
            <form class="task-board card" class="list" id="form">
            <form class="task-board card" class="list" id="form">
              <div class="list-item" id="doList">
              <div class="list-item" id="doList">

upload.js

+function readURL(input) {
+    if (input.files && input.files[0]) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
+            $('#imagePreview').hide();
+            $('#imagePreview').fadeIn(650);
+        }
+        reader.readAsDataURL(input.files[0]);
+    }
+}
+$("#imageUpload").change(function() {
+    readURL(this);
+});