//Get urls from the server
function getUrls() {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', encodeURI('api/bookmarks'));
	xhr.onload = function() {
		if (xhr.status === 200) {
			var urls = xhr.responseText;
			displayBookMarks(urls);
		} else {
			alert('Request failed.  Returned status of ' + xhr.status);
		}
	};
	xhr.send();
}

getUrls();

//Display bookmark list
function displayBookMarks(urls) {
	urls = JSON.parse(urls);
	var renderdiv = document.getElementById("bookmarklist");

	//Loop through the bookmark list and render
	for(var key in urls) {
		if(urls.hasOwnProperty(key)) {
			//Render each bookmark using the render template
			renderdiv.innerHTML = renderdiv.innerHTML + '<div class="divTableRow" id="' + key + '"><div class="divTableCell">' + urls[key] + '</div><div class="divTableCell"><a href="' + key + '">' + key + '</a></div><div class="divTableCell"><button type="button" class="delete" id="delete" value="' + key + '"onclick="deleteBookMark(this.value)">Delete</button></div></div>';
		}
    }
}

//Add new URLs to the server
function addBookMark() {
	var url   = document.getElementById("urlAddress").value;
	var title = document.getElementById("urlTitle").value;
	//Return if invalid URL
	if(!isUrlValid(url)) {
		alert("Please enter valid url");
		return;
	}

	var data = {
		"url": url,
		"title": title
	}

	xhr = new XMLHttpRequest();
	xhr.open('POST', encodeURI('api/addbookmark'));
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onload = function() {
		if (xhr.status === 200) {
			document.getElementById('bookmarklist').innerHTML = "";
			getUrls();
		} else if (xhr.status !== 200) {
			alert('Request failed ' + xhr.status);
		}
	};
	xhr.send(JSON.stringify(data));
}



//Check if input URL is Valid
function isUrlValid(userInput) {
    var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
    if(res == null)
        return false;
    else
        return true;
}


//Delete bookmark
function deleteBookMark(bookmark) {
	//Delete the Bookmark
	document.getElementById(bookmark).remove();
	
	//Remove URL from the database
	xhr = new XMLHttpRequest();
	xhr.open('POST', encodeURI('api/deletebookmark'));
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onload = function() {
		if (xhr.status === 200) {
			console.log("Delete Successful");
		} else if (xhr.status !== 200) {
			alert('Request failed ' + xhr.status);
		}
	};
	xhr.send(JSON.stringify(bookmark));
}
@@ -429,16 +429,19 @@
 urls);%0A%09
+// 
 var rend
@@ -646,16 +646,174 @@
 plate%0A%09%09
+%09renderBookMarkTemplate(key, urls%5Bkey%5D);%0A%09%09%7D%0A    %7D%0A%7D%0A%0Afunction renderBookMarkTemplate(url, title) %7B%0A%09var renderdiv = document.getElementById(%22bookmarklist%22);%0A
 %09renderd
@@ -879,27 +879,27 @@
 ow%22 id=%22' + 
-key
+url
  + '%22%3E%3Cdiv c
@@ -922,25 +922,21 @@
 ll%22%3E' + 
-urls%5Bkey%5D
+title
  + '%3C/di
@@ -972,27 +972,27 @@
 a href=%22' + 
-key
+url
  + '%22%3E' + ke
@@ -985,27 +985,27 @@
 rl + '%22%3E' + 
-key
+url
  + '%3C/a%3E%3C/di
@@ -1092,19 +1092,19 @@
 ue=%22' + 
-key
+url
  + '%22onc
@@ -1167,26 +1167,16 @@
 /div%3E';%0A
-%09%09%7D%0A    %7D%0A
 %7D%0A%0A//Add
@@ -1701,76 +1701,166 @@
 %0A%09%09%09
-document.getElementById('bookmarklist').innerHTML = %22%22;%0A%09%09%09getUrls()
+renderBookMarkTemplate(url, title);%0A%0A%09%09%09//Clear Text area%0A%09%09%09document.getElementById(%22urlAddress%22).value= %22%22;%0A%09%09%09document.getElementById(%22urlTitle%22).value= %22%22
 ;%0A%09%09

Add button resolved