From b508dc190e04d1e56a51e511b9e94c6bb5e66e2f Mon Sep 17 00:00:00 2001
From: Raghu-Ch <raghu6004@gmail.com>
Date: Tue, 7 Feb 2017 03:16:57 -0800
Subject: [PATCH] getting saving, getting and showing data in javascript

---
 js/main.js | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 main.html  |   7 ++--
 2 files changed, 120 insertions(+), 3 deletions(-)
 create mode 100644 js/main.js

diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..2197a76
--- /dev/null
+++ b/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 -----------------------------------------------------------//
diff --git a/main.html b/main.html
index 23962d5..f1cff14 100644
--- a/main.html
+++ b/main.html
@@ -13,7 +13,7 @@
  <link rel="stylesheet" href="css/style.css">
 
 </head>
-<body>
+<body onload="fetchBookmarks()">
   <div class="container">
     <div class="header clearfix">
       <h3 class="text-muted">Bookmarker</h3>
@@ -21,7 +21,7 @@
 
       <div class="jumbotron">
         <h2>Bookmark Your Favorite Sites</h2>
-        <form id ="myform">
+        <form id ="myForm">
           <div class="form-group">
             <lable>Site Name</lable>
             <input type="text" class="form-control" id="siteName" placeholder="enter website name">
@@ -30,6 +30,7 @@
             <lable>Site URL</lable>
             <input type="text" class="form-control" id="siteUrl" placeholder="enter site url">
           </div>
+          <button type="submit" class="btn btn-primary">Submit</button>
         </form>
       </div>
 
@@ -40,7 +41,7 @@
      </div>
 
      <footer class="footer">
-       <p>&copy; 2016 Bookmarker, Inc.</p>
+       <p>&copy; 2017 Bookmarker, Inc.</p>
      </footer>
   </div> <!-- container ends -->