Copying an item from one list to another

Question

I'm creating a to-do list that allows the user to add and delete tasks. I'm trying to make it so the user can move one task from one list to another list. This is the code that I currently have. I'm not sure what I'm doing wrong. I'm guessing the problem is somewhere in my JavaScript.

HTML:

<input type='checkbox' id="togglelist1" class='arrow'/>
  <label for="list1menu">
    <input type="text" name="newlist1" value="" spellcheck="false" placeholder="New List" id="newlist1">
    <ul id="list1UL">
      <li><input type="checkbox" id="newlist1item" class="right-margin"><label>List1</label> <button type="button" class="deletelist"> </button> <button type="button" class="addtolist2"></button></li>
    </ul>
  </label>

<input type='checkbox' id="togglelist2" class='arrow'/>
<label for="list2 menu">
  <ul id="list2UL" class='list2UL'>
    <li><input type="checkbox" id="newlist2item" class="right-margin"><label>List2</label> <button type="button" class="deletelist"></button></li>
  </ul>
</label>

JavaScript:

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newList1 = $(this).val();
      if (newList1) {
        var li = $("<li><input type="checkbox" id="newlist1item" class="right-margin"><label>List1</label> <button type="button" class="deletelist"> </button> <button type="button" class="addtolist2"></button></li>");
        $('#list1UL').append(li);
        $(this).val("");
        localStorage.setItem("list1UL", value);
      }
    }
  });
  $(document).on("click", ".deletelist", function() {
    $(this).parent().remove();
  });
  $(".addtolist2").on( "click", function() {
    $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity"));
    $(".addtolist2").toggleClass("list2UL");
    $('#list1UL input:checked').parent().clone().appendTo('#list2UL');
});
});

CSS:

#togglelist1 {
  cursor: pointer;
  position: absolute;
  background: url('list1.png') no-repeat;
  height: 30px;
  width: 30px;
  background-size: 100%;
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#togglelist2 {
  cursor: pointer;
  position: absolute;
  background: url('addtolist2.png') no-repeat;
  background-size: 100%;
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

____List 1____

label[for="list1menu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  bottom: 250px;
  left: 250px;
  width: 680px;
  height: 540px;
}

input[name="newlist1item"] {
  text-decoration: none;
  position: absolute;
  top: 100px;
  left: 50px;
  width: 418px;
  word-wrap: break-word;
  font-size: 20px;
  color: black;
  outline:0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#togglelist1:checked ~ label[for="list1menu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  bottom: 55px;
  left: 9px;
  width: 500px;
  height: 860px;
}

label[for="list1menu"] h1 {
  position: absolute;
  display: block;
  color: black;
  font-size: 30px;
  font-weight: 300;
  left: 85px;
  top: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

____List 2____

label[for="list2menu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  bottom: 250px;
  left: 250px;
  width: 680px;
  height: 540px;
}

ul[class='list2UL'] {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 142px;
  left: 50px;
  list-style-type: none;
  font-size: 20px;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-wrap: break-word;
  width: 355px;
}

#togglelist2:checked ~ label[for="list2menu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  bottom: 55px;
  left: 9px;
  width: 500px;
  height: 860px;
}

#togglelist2:checked ~ .list2UL {
  position: absolute;
  color: black;
  font-size: 30px;
  font-weight: 300;
  left: 85px;
  top: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label[for="list2menu"] h1 {
  position: absolute;
  color: black;
  font-size: 30px;
  font-weight: 300;
  left: 85px;
  top: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#togglelist2:checked ~ ul[class='list2UL'] {
  display: block;
  position: absolute;
  color: black;
  font-size: 30px;
  font-weight: 300;
  left: 85px;
  top: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Answer 1

Try this. which will allow you to add - edit and delete task.

//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.

//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.


//Event handling, uder interaction is what starts the code execution.

var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


//New task list item
var createNewTaskElement=function(taskString){

	var listItem=document.createElement("li");

	//input (checkbox)
	var checkBox=document.createElement("input");//checkbx
	//label
	var label=document.createElement("label");//label
	//input (text)
	var editInput=document.createElement("input");//text
	//button.edit
	var editButton=document.createElement("button");//edit button

	//button.delete
	var deleteButton=document.createElement("button");//delete button

	label.innerText=taskString;

	//Each elements, needs appending
	checkBox.type="checkbox";
	editInput.type="text";

	editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
	editButton.className="edit";
	deleteButton.innerText="Delete";
	deleteButton.className="delete";



	//and appending.
	listItem.appendChild(checkBox);
	listItem.appendChild(label);
	listItem.appendChild(editInput);
	listItem.appendChild(editButton);
	listItem.appendChild(deleteButton);
	return listItem;
}



var addTask=function(){
	console.log("Add Task...");
	//Create a new list item with the text from the #new-task:
	var listItem=createNewTaskElement(taskInput.value);

	//Append listItem to incompleteTaskHolder
	incompleteTaskHolder.appendChild(listItem);
	bindTaskEvents(listItem, taskCompleted);

	taskInput.value="";

}

//Edit an existing task.

var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");


var listItem=this.parentNode;

var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var containsClass=listItem.classList.contains("editMode");
		//If class of the parent is .editmode
		if(containsClass){

		//switch to .editmode
		//label becomes the inputs value.
			label.innerText=editInput.value;
		}else{
			editInput.value=label.innerText;
		}

		//toggle .editmode on the parent.
		listItem.classList.toggle("editMode");
}




//Delete task.
var deleteTask=function(){
		console.log("Delete Task...");

		var listItem=this.parentNode;
		var ul=listItem.parentNode;
		//Remove the parent list item from the ul.
		ul.removeChild(listItem);

}


//Mark task completed
var taskCompleted=function(){
		//console.log("Complete Task...");
	
	//Append the task list item to the #completed-tasks
	var listItem=this.parentNode;
	completedTasksHolder.appendChild(listItem);
				bindTaskEvents(listItem, taskIncomplete);

}


var taskIncomplete=function(){
		//console.log("Incomplete Task...");
//Mark task as incomplete.
	//When the checkbox is unchecked
		//Append the task list item to the #incomplete-tasks.
		var listItem=this.parentNode;
	incompleteTaskHolder.appendChild(listItem);
			bindTaskEvents(listItem,taskCompleted);
}



var ajaxRequest=function(){
	//console.log("AJAX Request");
}

//The glue to hold it all together.


//Set the click handler to the addTask function.
addButton.onclick=addTask;
addButton.addEventListener("click",addTask);
addButton.addEventListener("click",ajaxRequest);


var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
	//console.log("bind list item events");
//select ListItems children
	var checkBox=taskListItem.querySelector("input[type=checkbox]");
	var editButton=taskListItem.querySelector("button.edit");
	var deleteButton=taskListItem.querySelector("button.delete");


			//Bind editTask to edit button.
			editButton.onclick=editTask;
			//Bind deleteTask to delete button.
			deleteButton.onclick=deleteTask;
			//Bind taskCompleted to checkBoxEventHandler.
			checkBox.onchange=checkBoxEventHandler;
}

//cycle over incompleteTaskHolder ul list items
	//for each list item
	for (var i=0; i<incompleteTaskHolder.children.length;i++){

		//bind events to list items chldren(tasksCompleted)
		bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
	}




//cycle over completedTasksHolder ul list items
	for (var i=0; i<completedTasksHolder.children.length;i++){
	//bind events to list items chldren(tasksIncompleted)
		bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
	}




// Issues with usabiliy don't get seen until they are in front of a human tester.

//prevent creation of empty tasks.

//Shange edit to save when you are in edit mode.

/* Basic Style */
body {
  background: #fff;
  color: #333;
  font-family: Lato, sans-serif;
}
.container {
  display: block;
  width: 400px;
  margin: 10px auto 0;
}
ul {
  margin: 0;
  padding: 0;
}
li * {
  float: left;
}
li, h3 {
  clear:both;
  list-style:none;
}
input, button {
  outline: none;
}
button {
  background: none;
  border: 0px;
  color: #888;
  font-size: 15px;
  width: 60px;
  margin: 10px 0 0;
  font-family: Lato, sans-serif;
  cursor: pointer;
}
button:hover {
  color: #333;
}
/* Heading */
h3,
label[for='new-task'] {
  color: #333;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 2px solid #333;
  padding: 30px 0 10px;
  margin: 0;
  text-transform: uppercase;
}
input[type="text"] {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
  height: 18px;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  font-family: Lato, sans-serif;
  color: #888;
}
input[type="text"]:focus {
  color: #333;
}

/* New Task */
label[for='new-task'] {
  display: block;
  margin: 0 0 20px;
}
input#new-task {
  float: left;
  width: 318px;
}
p > button:hover {
  color: #0FC57C;
}

/* Task list */
li {
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
li > input[type="checkbox"] {
  margin: 0 10px;
  position: relative;
  top: 15px;
}
li > label {
  font-size: 18px;
  line-height: 40px;
  width: 237px;
  padding: 0 0 0 11px;
}
li >  input[type="text"] {
  width: 226px;
}
li > .delete:hover {
  color: #CF2323;
}

/* Completed */
#completed-tasks label {
  text-decoration: line-through;
  color: #888;
}

/* Edit Task */
ul li input[type=text] {
  display:none;
}

ul li.editMode input[type=text] {
  display:block;
}

ul li.editMode label {
  display:none;
}

<html>
  <head>
    <title>Todo App</title>

  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>
      
      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        
      </ul>
      
      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
    </div>

    <script type="text/javascript" src="app.js"></script>

  </body>
</html>