vcgit-forge/bookmarkApplication
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/bookmarkApplication.git synced 2026-02-10 03:43:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

getting saving, getting and showing data in javascript

Browse Source
This commit is contained in:
Raghu-Ch
2017-02-07 03:16:57 -08:00
parent bfa8a22a40
commit b508dc190e
2 changed files with 120 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
js/main.js Normal file
View File

@@ -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 -----------------------------------------------------------//

7
main.html
View File

@@ -13,7 +13,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body onload="fetchBookmarks()">
<div class="container"> <div class="container">
<div class="header clearfix"> <div class="header clearfix">
<h3 class="text-muted">Bookmarker</h3> <h3 class="text-muted">Bookmarker</h3>
@@ -21,7 +21,7 @@
<div class="jumbotron"> <div class="jumbotron">
<h2>Bookmark Your Favorite Sites</h2> <h2>Bookmark Your Favorite Sites</h2>
<form id ="myform"> <form id ="myForm">
<div class="form-group"> <div class="form-group">
<lable>Site Name</lable> <lable>Site Name</lable>
<input type="text" class="form-control" id="siteName" placeholder="enter website name"> <input type="text" class="form-control" id="siteName" placeholder="enter website name">
@@ -30,6 +30,7 @@
<lable>Site URL</lable> <lable>Site URL</lable>
<input type="text" class="form-control" id="siteUrl" placeholder="enter site url"> <input type="text" class="form-control" id="siteUrl" placeholder="enter site url">
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> </form>
</div> </div>
@@ -40,7 +41,7 @@
</div> </div>
<footer class="footer"> <footer class="footer">
<p>&copy; 2016 Bookmarker, Inc.</p> <p>&copy; 2017 Bookmarker, Inc.</p>
</footer> </footer>
</div> <!-- container ends --> </div> <!-- container ends -->