leeya018/index.html

## index.html
<html>

<head>

	<title>lee</title>
	<link rel="stylesheet" type="text/css" href="style.css">
<style id="jsbin-css">
#task {
	margin-top: 2rem;
	margin-left: 1rem;
}

#validation {
	color: red;
	margin-left: 1rem;
}

#li1{
	color:orange;
}

#li2{
	color:green;
}

#li3{
	color:#3987c9;
}

hr {
	border-style: solid;
	border-width: 0.1rem;
	margin-bottom: 1rem;
}
</style>
</head>
<body>
	<label id="title">Mockup:</label>
	<div id="task">
		<input id="inputText" type="textInput" placeHolder="Add new task description" maxlength="42">
		<select id="selectOption">
			<option value="Urgent">Urgent</option>
			<option value="Critical">Critical</option>
			<option value="Normal" selected>Normal</option>
			<option value="If You Can">If You Can</option>
		</select>
		<button onClick="addItem()">add</button>
		<label id="validation"></label>
		<hr>
		<table id="list"></table>
	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="functions.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		populateTasks();
	});
	</script>
<script id="jsbin-javascript">
var count = 3;

var tasksList =  [
	["Register to Full Stack Web Course", "Normal", false, "row_0"],
	["Attend Selection Day", "Critical", false, "row_1"],
	["Go see X-Men apocalypse movie", "If You Can", false, "row_2"]];

function populateTasks() {
	sortList();
	for (var i = 0; i< tasksList.length; i++) {
		addToList(tasksList[i]);
	}
}

function addItem() {
	var taskInput = $("#inputText").val();
	var priorityInput = $("#selectOption").val();

	if (taskInput.length >= 6) {
		$("#validation").empty();
		tasksList.push([taskInput, priorityInput, false, "row_" + count]);
		count++;
		$("#list").empty();
		populateTasks();
	} else {
		$("#validation").text("* More than 5 characters required!");
	}
}

function addToList(task){

	var taskInput = task[0];
	var priorityInput = task[1];
	var isDone = task[2];
	var taskId = task[3];

	var row = $("<tr id='"+ taskId + "' onClick='markAsDone(this)'></tr>");
	var task = document.createElement('td');
	var priority = document.createElement('td');

	task.width = "300er";
	task.innerHTML = taskInput;
	priority.innerHTML = priorityInput;

	row.append(task);
	row.append(priority);

	switch (priorityInput) {
		case "Normal":
		row.css("color","green");
		break;
		case "Critical":
		row.css("color","orange");
		break;
		case "If You Can":
		row.css("color","#3987c9");
		break;
		case "Urgent":
		row.css("color","red");
		break;
	}

	if (isDone) {
		markAsDone(row[0]);
	}

	$("#list").append(row);
}

function sortList() {
	tasksList.sort(function(a, b) {
		var priorityLev1 = getPriorityLevel(a[1]);
		var priorityLev2 = getPriorityLevel(b[1]);

		if (priorityLev1 === priorityLev2) {
			return a[0].toLowerCase() > b[0].toLowerCase();
		} else {
			return priorityLev1 - priorityLev2;
		}
	});
}

function markAsDone(elem) {
	var markedTask = tasksList.filter(function(el) { return el[3] === elem.id; })[0];
	markedTask[2] = true;
	elem.style.textDecoration = "line-through";
	elem.style.color = "gray";
}

$(document).keydown(function(e) {
	if (e.keyCode == 13) {
		addItem();
	}
});

function getPriorityLevel(val) {
	switch (val) {
		case "Urgent":
		return 1;
		break;
		case "Critical":
		return 2;
		break;
		case "Normal":
		return 3;
		break;
		case "If You Can":
		return 4;
		break;
	}
	return 0;
}
</script>

<script id="jsbin-source-html" type="text/html"><html>

<head>

	<title>lee</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<label id="title">Mockup:</label>
	<div id="task">
		<input id="inputText" type="textInput" placeHolder="Add new task description" maxlength="42">
		<select id="selectOption">
			<option value="Urgent">Urgent</option>
			<option value="Critical">Critical</option>
			<option value="Normal" selected>Normal</option>
			<option value="If You Can">If You Can</option>
		</select>
		<button onClick="addItem()">add</button>
		<label id="validation"></label>
		<hr>
		<table id="list"></table>
	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"><\/script>
<script type="text/javascript" src="functions.js"><\/script>
	<script type="text/javascript">
	$(document).ready(function(){
		populateTasks();
	});
	<\/script>
</body>
</html>

</script>

<script id="jsbin-source-css" type="text/css">
#task {
	margin-top: 2rem;
	margin-left: 1rem;
}

#validation {
	color: red;
	margin-left: 1rem;
}

#li1{
	color:orange;
}

#li2{
	color:green;
}

#li3{
	color:#3987c9;
}

hr {
	border-style: solid;
	border-width: 0.1rem;
	margin-bottom: 1rem;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var count = 3;

var tasksList =  [
	["Register to Full Stack Web Course", "Normal", false, "row_0"],
	["Attend Selection Day", "Critical", false, "row_1"],
	["Go see X-Men apocalypse movie", "If You Can", false, "row_2"]];

function populateTasks() {
	sortList();
	for (var i = 0; i< tasksList.length; i++) {
		addToList(tasksList[i]);
	}
}

function addItem() {
	var taskInput = $("#inputText").val();
	var priorityInput = $("#selectOption").val();

	if (taskInput.length >= 6) {
		$("#validation").empty();
		tasksList.push([taskInput, priorityInput, false, "row_" + count]);
		count++;
		$("#list").empty();
		populateTasks();
	} else {
		$("#validation").text("* More than 5 characters required!");
	}
}

function addToList(task){

	var taskInput = task[0];
	var priorityInput = task[1];
	var isDone = task[2];
	var taskId = task[3];

	var row = $("<tr id='"+ taskId + "' onClick='markAsDone(this)'></tr>");
	var task = document.createElement('td');
	var priority = document.createElement('td');

	task.width = "300er";
	task.innerHTML = taskInput;
	priority.innerHTML = priorityInput;

	row.append(task);
	row.append(priority);

	switch (priorityInput) {
		case "Normal":
		row.css("color","green");
		break;
		case "Critical":
		row.css("color","orange");
		break;
		case "If You Can":
		row.css("color","#3987c9");
		break;
		case "Urgent":
		row.css("color","red");
		break;
	}

	if (isDone) {
		markAsDone(row[0]);
	}

	$("#list").append(row);
}

function sortList() {
	tasksList.sort(function(a, b) {
		var priorityLev1 = getPriorityLevel(a[1]);
		var priorityLev2 = getPriorityLevel(b[1]);

		if (priorityLev1 === priorityLev2) {
			return a[0].toLowerCase() > b[0].toLowerCase();
		} else {
			return priorityLev1 - priorityLev2;
		}
	});
}

function markAsDone(elem) {
	var markedTask = tasksList.filter(function(el) { return el[3] === elem.id; })[0];
	markedTask[2] = true;
	elem.style.textDecoration = "line-through";
	elem.style.color = "gray";
}

$(document).keydown(function(e) {
	if (e.keyCode == 13) {
		addItem();
	}
});

function getPriorityLevel(val) {
	switch (val) {
		case "Urgent":
		return 1;
		break;
		case "Critical":
		return 2;
		break;
		case "Normal":
		return 3;
		break;
		case "If You Can":
		return 4;
		break;
	}
	return 0;
}</script></body>
</html>

## jsbin.carujedihe.css
#task {
	margin-top: 2rem;
	margin-left: 1rem;
}

#validation {
	color: red;
	margin-left: 1rem;
}

#li1{
	color:orange;
}

#li2{
	color:green;
}

#li3{
	color:#3987c9;
}

hr {
	border-style: solid;
	border-width: 0.1rem;
	margin-bottom: 1rem;
}

## jsbin.carujedihe.js
var count = 3;

var tasksList =  [
	["Register to Full Stack Web Course", "Normal", false, "row_0"],
	["Attend Selection Day", "Critical", false, "row_1"],
	["Go see X-Men apocalypse movie", "If You Can", false, "row_2"]];

function populateTasks() {
	sortList();
	for (var i = 0; i< tasksList.length; i++) {
		addToList(tasksList[i]);
	}
}

function addItem() {
	var taskInput = $("#inputText").val();
	var priorityInput = $("#selectOption").val();

	if (taskInput.length >= 6) {
		$("#validation").empty();
		tasksList.push([taskInput, priorityInput, false, "row_" + count]);
		count++;
		$("#list").empty();
		populateTasks();
	} else {
		$("#validation").text("* More than 5 characters required!");
	}
}

function addToList(task){

	var taskInput = task[0];
	var priorityInput = task[1];
	var isDone = task[2];
	var taskId = task[3];

	var row = $("<tr id='"+ taskId + "' onClick='markAsDone(this)'></tr>");
	var task = document.createElement('td');
	var priority = document.createElement('td');

	task.width = "300er";
	task.innerHTML = taskInput;
	priority.innerHTML = priorityInput;

	row.append(task);
	row.append(priority);

	switch (priorityInput) {
		case "Normal":
		row.css("color","green");
		break;
		case "Critical":
		row.css("color","orange");
		break;
		case "If You Can":
		row.css("color","#3987c9");
		break;
		case "Urgent":
		row.css("color","red");
		break;
	}

	if (isDone) {
		markAsDone(row[0]);
	}

	$("#list").append(row);
}

function sortList() {
	tasksList.sort(function(a, b) {
		var priorityLev1 = getPriorityLevel(a[1]);
		var priorityLev2 = getPriorityLevel(b[1]);

		if (priorityLev1 === priorityLev2) {
			return a[0].toLowerCase() > b[0].toLowerCase();
		} else {
			return priorityLev1 - priorityLev2;
		}
	});
}

function markAsDone(elem) {
	var markedTask = tasksList.filter(function(el) { return el[3] === elem.id; })[0];
	markedTask[2] = true;
	elem.style.textDecoration = "line-through";
	elem.style.color = "gray";
}

$(document).keydown(function(e) {
	if (e.keyCode == 13) {
		addItem();
	}
});

function getPriorityLevel(val) {
	switch (val) {
		case "Urgent":
		return 1;
		break;
		case "Critical":
		return 2;
		break;
		case "Normal":
		return 3;
		break;
		case "If You Can":
		return 4;
		break;
	}
	return 0;
}
	<html>

	<head>

	<title>lee</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style id="jsbin-css">
	#task {
	margin-top: 2rem;
	margin-left: 1rem;
	}

	#validation {
	color: red;
	margin-left: 1rem;
	}

	#li1{
	color:orange;
	}

	#li2{
	color:green;
	}

	#li3{
	color:#3987c9;
	}

	hr {
	border-style: solid;
	border-width: 0.1rem;
	margin-bottom: 1rem;
	}
	</style>
	</head>
	<body>
	<label id="title">Mockup:</label>
	<div id="task">
	<input id="inputText" type="textInput" placeHolder="Add new task description" maxlength="42">
	<select id="selectOption">
	<option value="Urgent">Urgent</option>
	<option value="Critical">Critical</option>
	<option value="Normal" selected>Normal</option>
	<option value="If You Can">If You Can</option>
	</select>
	<button onClick="addItem()">add</button>
	<label id="validation"></label>
	<hr>
	<table id="list"></table>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src="functions.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	populateTasks();
	});
	</script>
	<script id="jsbin-javascript">
	var count = 3;

	var tasksList = [
	["Register to Full Stack Web Course", "Normal", false, "row_0"],
	["Attend Selection Day", "Critical", false, "row_1"],
	["Go see X-Men apocalypse movie", "If You Can", false, "row_2"]];

	function populateTasks() {
	sortList();
	for (var i = 0; i< tasksList.length; i++) {
	addToList(tasksList[i]);
	}
	}

	function addItem() {
	var taskInput = $("#inputText").val();
	var priorityInput = $("#selectOption").val();

	if (taskInput.length >= 6) {
	$("#validation").empty();
	tasksList.push([taskInput, priorityInput, false, "row_" + count]);
	count++;
	$("#list").empty();
	populateTasks();
	} else {
	$("#validation").text("* More than 5 characters required!");
	}
	}

	function addToList(task){

	var taskInput = task[0];
	var priorityInput = task[1];
	var isDone = task[2];
	var taskId = task[3];

	var row = $("<tr id='"+ taskId + "' onClick='markAsDone(this)'></tr>");
	var task = document.createElement('td');
	var priority = document.createElement('td');

	task.width = "300er";
	task.innerHTML = taskInput;
	priority.innerHTML = priorityInput;

	row.append(task);
	row.append(priority);

	switch (priorityInput) {
	case "Normal":
	row.css("color","green");
	break;
	case "Critical":
	row.css("color","orange");
	break;
	case "If You Can":
	row.css("color","#3987c9");
	break;
	case "Urgent":
	row.css("color","red");
	break;
	}

	if (isDone) {
	markAsDone(row[0]);
	}

	$("#list").append(row);
	}

	function sortList() {
	tasksList.sort(function(a, b) {
	var priorityLev1 = getPriorityLevel(a[1]);
	var priorityLev2 = getPriorityLevel(b[1]);

	if (priorityLev1 === priorityLev2) {
	return a[0].toLowerCase() > b[0].toLowerCase();
	} else {
	return priorityLev1 - priorityLev2;
	}
	});
	}

	function markAsDone(elem) {
	var markedTask = tasksList.filter(function(el) { return el[3] === elem.id; })[0];
	markedTask[2] = true;
	elem.style.textDecoration = "line-through";
	elem.style.color = "gray";
	}

	$(document).keydown(function(e) {
	if (e.keyCode == 13) {
	addItem();
	}
	});

	function getPriorityLevel(val) {
	switch (val) {
	case "Urgent":
	return 1;
	break;
	case "Critical":
	return 2;
	break;
	case "Normal":
	return 3;
	break;
	case "If You Can":
	return 4;
	break;
	}
	return 0;
	}
	</script>

	<script id="jsbin-source-html" type="text/html"><html>

	<head>

	<title>lee</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<label id="title">Mockup:</label>
	<div id="task">
	<input id="inputText" type="textInput" placeHolder="Add new task description" maxlength="42">
	<select id="selectOption">
	<option value="Urgent">Urgent</option>
	<option value="Critical">Critical</option>
	<option value="Normal" selected>Normal</option>
	<option value="If You Can">If You Can</option>
	</select>
	<button onClick="addItem()">add</button>
	<label id="validation"></label>
	<hr>
	<table id="list"></table>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"><\/script>
	<script type="text/javascript" src="functions.js"><\/script>
	<script type="text/javascript">
	$(document).ready(function(){
	populateTasks();
	});
	<\/script>
	</body>
	</html>

	</script>

	<script id="jsbin-source-css" type="text/css">
	#task {
	margin-top: 2rem;
	margin-left: 1rem;
	}

	#validation {
	color: red;
	margin-left: 1rem;
	}

	#li1{
	color:orange;
	}

	#li2{
	color:green;
	}

	#li3{
	color:#3987c9;
	}

	hr {
	border-style: solid;
	border-width: 0.1rem;
	margin-bottom: 1rem;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var count = 3;

	var tasksList = [
	["Register to Full Stack Web Course", "Normal", false, "row_0"],
	["Attend Selection Day", "Critical", false, "row_1"],
	["Go see X-Men apocalypse movie", "If You Can", false, "row_2"]];

	function populateTasks() {
	sortList();
	for (var i = 0; i< tasksList.length; i++) {
	addToList(tasksList[i]);
	}
	}

	function addItem() {
	var taskInput = $("#inputText").val();
	var priorityInput = $("#selectOption").val();

	if (taskInput.length >= 6) {
	$("#validation").empty();
	tasksList.push([taskInput, priorityInput, false, "row_" + count]);
	count++;
	$("#list").empty();
	populateTasks();
	} else {
	$("#validation").text("* More than 5 characters required!");
	}
	}

	function addToList(task){

	var taskInput = task[0];
	var priorityInput = task[1];
	var isDone = task[2];
	var taskId = task[3];

	var row = $("<tr id='"+ taskId + "' onClick='markAsDone(this)'></tr>");
	var task = document.createElement('td');
	var priority = document.createElement('td');

	task.width = "300er";
	task.innerHTML = taskInput;
	priority.innerHTML = priorityInput;

	row.append(task);
	row.append(priority);

	switch (priorityInput) {
	case "Normal":
	row.css("color","green");
	break;
	case "Critical":
	row.css("color","orange");
	break;
	case "If You Can":
	row.css("color","#3987c9");
	break;
	case "Urgent":
	row.css("color","red");
	break;
	}

	if (isDone) {
	markAsDone(row[0]);
	}

	$("#list").append(row);
	}

	function sortList() {
	tasksList.sort(function(a, b) {
	var priorityLev1 = getPriorityLevel(a[1]);
	var priorityLev2 = getPriorityLevel(b[1]);

	if (priorityLev1 === priorityLev2) {
	return a[0].toLowerCase() > b[0].toLowerCase();
	} else {
	return priorityLev1 - priorityLev2;
	}
	});
	}

	function markAsDone(elem) {
	var markedTask = tasksList.filter(function(el) { return el[3] === elem.id; })[0];
	markedTask[2] = true;
	elem.style.textDecoration = "line-through";
	elem.style.color = "gray";
	}

	$(document).keydown(function(e) {
	if (e.keyCode == 13) {
	addItem();
	}
	});

	function getPriorityLevel(val) {
	switch (val) {
	case "Urgent":
	return 1;
	break;
	case "Critical":
	return 2;
	break;
	case "Normal":
	return 3;
	break;
	case "If You Can":
	return 4;
	break;
	}
	return 0;
	}</script></body>
	</html>