js

var stateCheckbox = document.getElementsByClassName("state");

var addCheckbox = document.querySelector("input[name=add]");

var addButton = document.querySelector("input[name=addButton]");

var editButton = document.getElementsByName("edit");

var trashIcons = document.getElementsByName("trash");

var priorityCheckboxes = document.getElementsByName("priority");

let username = document.querySelector('#register input[name=username]');
username.addEventListener('keyup', validateUsername, false);

let password = document.querySelector('#register input[name=password]');
let repeat = document.querySelector('#register input[name=repeat]');
password.addEventListener('keyup', validatePassword, false);
repeat.addEventListener('keyup', validateRepeat.bind(repeat, password), false);

let register = document.querySelector('#register form');
register.addEventListener('submit', validateRegister, false);

function validateUsername() {
  if (!/^[a-z]{3,}$/.test(this.value))
    this.classList.add('invalid');
  else
    this.classList.remove('invalid');
}

function validatePassword(other) {
  if (!/^.{8,}$/.test(this.value))
    this.classList.add('invalid');
  else
    this.classList.remove('invalid');
}

function validateRepeat(password) {
  if (this.value !== password.value)
    this.classList.add('invalid');
  else
    this.classList.remove('invalid');
}

function validateRegister(event) {
  let inputs = this.querySelectorAll('input');
  for (let i = 0; i < inputs.length; i++)
    if (inputs[i].classList.contains('invalid'))
     event.preventDefault();
}

//Configure state checkboxes to update objective state with distinct colors
for(var i = 0; i < stateCheckbox.length; i++){
	stateCheckbox[i].addEventListener('change', stateCheckboxConfiguration);
}

function stateCheckboxConfiguration() {
	var objective = this.parentNode;
	var description = objective.children[1];

	if(this.checked) {
		description.style.color = "gray";
	} else {
		description.style.color = "black";
	}
}

//Configure trash icons to delete content
for(var i = 0; i < trashIcons.length; i++){
	trashIcons[i].addEventListener('click', trashConfiguration);
}

//Configure New List's Add button
addButton.addEventListener("click", addButtonConfiguration);

function addButtonConfiguration() {
	var article = this.parentNode.parentNode;
	var newArticle = document.createElement("ARTICLE");

	//Create new header to the list's new title
	var headerList = document.createElement("LI");
	var TitleBox = this.parentNode.children[0];
	var listTitle = document.createElement("H3");
		listTitle.innerText = TitleBox.value;

	//Create new Edit button
	var editButton = document.createElement("INPUT");
		editButton.id = "editButton";
		editButton.type = "button";
		editButton.name = "edit";
		editButton.value = "Edit";

	editButton.addEventListener("click", editButtonConfiguration);

	//Add header elements
	headerList.appendChild(listTitle);
	headerList.appendChild(editButton);

	var objectivesList = article.children[1];
	var newObjectivesList = document.createElement("UL");

	for(var i = 0; i < objectivesList.childElementCount-1; i++){
		//Create objective <li>
		var objectiveLine = document.createElement("LI");

		//Create state checkbox
		var stateCheckbox = document.createElement("INPUT");
			stateCheckbox.class = "state";
			stateCheckbox.type = "checkbox";
			stateCheckbox.name = "state";
			stateCheckbox.value = "State";

		//Configure checkbox for state changes
		stateCheckbox.addEventListener( 'change', stateCheckboxConfiguration);

		//Create new description
		var description = document.createElement("P");
			description.innerText = objectivesList.children[i].children[0].value;

		//Add objective info to <li>
		objectiveLine.appendChild(stateCheckbox);
		objectiveLine.appendChild(description);

		//Add <li> to the List
		newObjectivesList.appendChild(objectiveLine);
	}
	//Create new trash icon for delete
	var trash = document.createElement("IMG");
		trash.src = "images/site/trash_icon.png";
		trash.name = "trash";

	trash.addEventListener("click", trashConfiguration);

	//Add header, list & trash to the new article
	newArticle.appendChild(headerList);
	newArticle.appendChild(newObjectivesList);
	newArticle.appendChild(trash);

	//Add the new list to the rest
	var lists = document.getElementById("lists");
	lists.appendChild(newArticle);

	//Reset New List interface
	article.children[0].children[0].value = null;
	for(var i = 0; i < objectivesList.childElementCount-1; i+=0)
		objectivesList.removeChild(objectivesList.children[0]);

	article.children[1].children[0].children[1].value = null;

	//Add new list to the database
	let request = new XMLHttpRequest();
	request.onload = function() {
		var last_id = JSON.parse(this.responseText);
		newArticle.id = last_id;

		//Add objectives to the new list in the database
		for(var i = 0; i < newObjectivesList.childElementCount; i++){
			let request2 = new XMLHttpRequest();
			request2.onload = function() {
				var args = JSON.parse(this.responseText);
				newObjectivesList.children[args[1]].id = args[0];
			};
			request2.open("get", "addObjective.php?list=" + last_id +
						"&description=" + newObjectivesList.children[i].children[1].innerText +
						"&state=" + 0 +
						"&i=" + i, true);

			request2.send();
		}
	};
	request.open("get", "addList.php?user=" + 1 +
				"&title=" + listTitle.innerText +
				"&priority=" + 0, true);

	request.send();
}

//Configure New List's checkboxes to create new objectives
addCheckbox.addEventListener("change", addCheckboxConfiguration);

function addCheckboxConfiguration() {
	var objective = this.parentNode;
	var objectiveList = objective.parentNode;
	var textInput = objective.children[1];

	//Create TextInput for the description
	var description = textInput.value;
	var ObjectiveBox = document.createElement("INPUT");
	ObjectiveBox.class = "objectiveText";
	ObjectiveBox.type = "text";
	ObjectiveBox.name = "objective";
	ObjectiveBox.value = description;

	//Reset the TextInput
	textInput.value = null;

	//Create trash icon
	var trash = document.createElement("IMG");
		trash.src = "images/site/trash_icon.png";
		trash.id = "trash";

	trash.addEventListener("click", trashConfiguration);

	//Create new <li>
	var objectiveLI = document.createElement("LI");
	objectiveLI.appendChild(ObjectiveBox);
	objectiveLI.appendChild(trash);

	objectiveList.insertBefore(objectiveLI, objectiveList.lastElementChild);
	this.checked = false;
}

//Configure Edit button to create the edit interface
for(var i = 0; i < editButton.length; i++){
	editButton[i].addEventListener("click", editButtonConfiguration);
}

function editButtonConfiguration() {
	if(this.value == "Edit"){
		var article = this.parentNode.parentNode;
		var title = article.children[0].children[0].innerText;

		//New editable Title
		var TitleBox = document.createElement("INPUT");
			TitleBox.class = "titleText";
			TitleBox.type = "text";
			TitleBox.name = "title";
			TitleBox.value = title;

		//Add new TextInput and Delete old Title header
		article.children[0].removeChild(article.children[0].children[0]);
		article.children[0].insertBefore(TitleBox, article.children[0].firstChild);

		//Remove Edit button for correct layout
		article.children[0].removeChild(article.children[0].children[1]);

		//Create the Save button
		var saveButton = document.createElement("INPUT");
			saveButton.id = "saveButton";
			saveButton.type = "button";
			saveButton.name = "save";
			saveButton.value = "Save";

		//Add the Save button
		article.children[0].appendChild(saveButton);

		//Change each objective to an editable input
		var objectivesList = article.children[1];

		for(var i = 0; i < objectivesList.childElementCount; i++){
			//Remove state checkbox
			objectivesList.children[i].removeChild(objectivesList.children[i].children[0]);

			//Create TextInput for the description
			var description = objectivesList.children[i].children[0].innerText;
			var ObjectiveBox = document.createElement("INPUT");
			ObjectiveBox.class = "objectiveText";
			ObjectiveBox.type = "text";
			ObjectiveBox.name = "objective";
			ObjectiveBox.value = description;

			//Create trash icon
			var trash = document.createElement("IMG");
				trash.src = "images/site/trash_icon.png";
				trash.id = "trash";

			trash.addEventListener("click", trashConfiguration);

			//Remove old description
			objectivesList.children[i].removeChild(objectivesList.children[i].children[0]);

			//Add new editable TextInput & trash icon
			objectivesList.children[i].appendChild(ObjectiveBox);
			objectivesList.children[i].appendChild(trash);
		}
		//Create New Line interface
		var newLine = document.createElement("LI");
		var addCheckbox = document.createElement("INPUT");
			addCheckbox.class = "add";
			addCheckbox.type = "checkbox";
			addCheckbox.name = "add";
			addCheckbox.value = "Add";

		addCheckbox.addEventListener("change", addCheckboxConfiguration);

		var textInput = document.createElement("INPUT");
			textInput.class = "text";
			textInput.type = "text";
			textInput.name = "description";
			textInput.placeholder = "Write here...";

		newLine.appendChild(addCheckbox);
		newLine.appendChild(textInput);

		//Add New Line interface
		objectivesList.appendChild(newLine);

		//Configure Save button to save new content
		saveButton.addEventListener("click", saveButtonConfiguration);
	}
}

function trashConfiguration() {
	var element = this.parentNode;
	var parent = element.parentNode;

	if(element.tagName == "ARTICLE"){
		let request = new XMLHttpRequest();
		request.open("get", "deleteList.php?id=" + element.id, true);
		request.send();
	}else if(element.tagName == "LI"){
		let request = new XMLHttpRequest();
		request.open("get", "deleteObjective.php?id=" + element.id, true);
		request.send();
	}

	parent.removeChild(element);
}

function saveButtonConfiguration() {
	//Create new header to the list's new title
	var TitleBox = this.parentNode.firstChild;
	var article = this.parentNode.parentNode;
	var listTitle = document.createElement("H3");
		listTitle.innerText = TitleBox.value;

	//Remove TextInput for the title
	article.children[0].removeChild(article.children[0].children[0]);

	//Add new Title header
	article.children[0].insertBefore(listTitle, article.children[0].firstChild);

	var objectivesList = article.children[1];

	for(var i = 0; i < objectivesList.childElementCount-1; i++){
		//Create state checkbox
		var stateCheckbox = document.createElement("INPUT");
			stateCheckbox.class = "state";
			stateCheckbox.type = "checkbox";
			stateCheckbox.name = "state";
			stateCheckbox.value = "State";

		//Configure checkbox for state changes
		stateCheckbox.addEventListener( 'change', stateCheckboxConfiguration);

		//Create new description
		var description = document.createElement("P");
			description.innerText = objectivesList.children[i].children[0].value;

		//Remove TextInput for the description & trash icon
		objectivesList.children[i].removeChild(objectivesList.children[i].children[0]);
		objectivesList.children[i].removeChild(objectivesList.children[i].children[0]);

		//Add new checkbox and description
		objectivesList.children[i].appendChild(stateCheckbox);
		objectivesList.children[i].appendChild(description);
	}
	//Remove new line interface
	objectivesList.removeChild(objectivesList.children[objectivesList.childElementCount-1]);

	//Create new Edit button
	var editButton = document.createElement("INPUT");
		editButton.id = "editButton";
		editButton.type = "button";
		editButton.name = "edit";
		editButton.value = "Edit";

	editButton.addEventListener("click", editButtonConfiguration);

	//Remove Save button
	article.children[0].removeChild(article.children[0].children[1]);

	//Add new Edit button
	article.children[0].appendChild(editButton);

	//Update new List's info in the database
	let request = new XMLHttpRequest();
		request.onload = function() {
			//Update objectives in the database
			for(var i = 0; i < objectivesList.childElementCount; i++){
				if(objectivesList.children[i].id > 0){
					let request2 = new XMLHttpRequest();
					request2.onload = function() {
						var arg = JSON.parse(this.responseText);
						objectivesList.children[arg].id = arg;
					};
					request2.open("get", "updateObjective.php?id=" + objectivesList.children[i].id +
						"&description=" + objectivesList.children[i].children[1].innerText +
						"&state=" + 0 +
						"&i=" + i, true);
					request2.send();
				} else{
					let request2 = new XMLHttpRequest();
					request2.onload = function() {
						var args = JSON.parse(this.responseText);
						objectivesList.children[args[1]].id = args[0];
					};
					request2.open("get", "addObjective.php?list=" + objectivesList.parentNode.id +
							"&description=" + objectivesList.children[i].children[1].innerText +
							"&state=" + 0 +
							"&i=" + i, true);
					request2.send();
				}
			}
		};
		request.open("get", "updateList.php?list=" + article.id +
					"&title=" + listTitle.innerText, true);

		request.send();
}

//Configure priority checkboxes
for(var i = 0; i < priorityCheckboxes.length; i++){
	priorityCheckboxes[i].addEventListener("change", priorityCheckboxConfiguration);
}

function priorityCheckboxConfiguration() {
	let request = new XMLHttpRequest();
	var article = this.parentNode.parentNode;

	if(this.checked){
		request = new XMLHttpRequest();
		request.onload = function() {
			var priority = JSON.parse(this.responseText);
			if(priority == 1){
				var importantSection = document.getElementById("important");
				importantSection.appendChild(article);
			} else {
				var generalSection = document.getElementById("lists");
				generalSection.appendChild(article);
			}
		};
		request.open("get", "updatePriority.php?list=" + article.id +
							"&priority=" + 1, true);
		request.send();
	} else {
		request = new XMLHttpRequest();
		request.onload = function() {
			var priority = JSON.parse(this.responseText);
			if(priority == 1){
				var importantSection = document.getElementById("important");
				importantSection.appendChild(article);
			} else {
				var generalSection = document.getElementById("lists");
				generalSection.appendChild(article);
			}
		};
		request.open("get", "updatePriority.php?list=" + article.id +
							"&priority=" + 0, true);
		request.send();
	}
}