getting saving, getting and showing data in javascript

js/main.js

@@ -0,0 +1,116 @@
+// listen form submit
+document.getElementById('myForm').addEventListener('submit', saveBookmark);
+
+   // save Bookmark
+function saveBookmark(e) {
+
+  // prevent form from submitting
+  e.preventDefault();
+
+  // Get form values
+  var siteName = document.getElementById('siteName').value;
+  var siteUrl = document.getElementById('siteUrl').value;
+
+  if(!validateForm(siteName, siteUrl)){
+   return false;
+ }
+
+  var bookmark = {
+    name: siteName,
+    url: siteUrl
+  };
+/*
+  // Test local Storage
+  localStorage.setItem('test', 'Hey there');
+  console.log(localStorage.getItem('test'));
+  localStorage.removeItem('test');
+  console.log(localStorage.getItem('test'));
+*/
+        // Test if bookmarks is null
+        if(localStorage.getItem('bookmarks') === null) {
+          // Init Array
+          var bookmarks = [];
+          // add to Array
+          bookmarks.push(bookmark);
+          // set to localStorage
+          localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+        } else {
+          // Get bookmarks from localStorage
+          var  bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
+          // Add bookmarks to Array
+          bookmarks.push(bookmark);
+          // Re-set back to localStorage
+          localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+        }
+
+        // clear form
+        document.getElementById('myForm').reset();
+
+        // Re-fetch bookmarks
+        fetchBookmarks();
+
+  }    // saveBookmark ends ------------------->
+
+
+
+  // fetch Bookmarks to display
+function fetchBookmarks() {
+// Get bookmarks from localStorage
+var  bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
+// Get output id
+var bookmarksResults = document.getElementById('bookmarksResults');
+
+    // Build output
+    bookmarksResults.innerHTML = '';
+    for (var i = 0; i < bookmarks.length; i++) {
+      var name = bookmarks[i].name;
+      var url = bookmarks[i].url;
+
+      bookmarksResults.innerHTML += '<div class="well">'+
+                                  '<h3>'+name+
+                                  ' <a class="btn btn-default" target="_blank" href="'+url+'">Visit</a> ' +
+                                  ' <a onclick="deleteBookmark(\''+url+'\')" class="btn btn-danger" href="#">Delete</a> ' +
+                                  '</h3>'+
+                                  '</div>';
+    }
+
+} // ----End of fetchBookmarks------------>
+
+  // Delete Bookmark
+function deleteBookmark(url) {
+  // Get bookmarks from localStorage
+  var  bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
+  // loop through the localStorage for url to delete
+  for (var i = 0; i < bookmarks.length; i++) {
+    if (bookmarks[i].url == url) {
+      bookmarks.splice(i, 1);
+    }
+  }
+  // Re-set back to localStorage
+  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+  // Re-fetch bookmarks
+  fetchBookmarks();
+
+} // ---------------End of deleteBookmark -------->
+
+ //  Form Validation
+  function validateForm(siteName, siteUrl) {
+      // if text fileds are empty
+      if (!siteName || !siteUrl) {
+        alert('Please fill the form with valid details');
+        return false;
+      }
+     // if not a valid URL
+      var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
+      var regex = new RegExp(expression);
+
+      if(!siteUrl.match(regex)){
+       alert('Please use a valid URL');
+       return false;
+     }
+
+     return true;
+  } // ------ End form Validation ------>
+
+
+  // ------------------------------------------End -----------------------------------------------------------//