API tools faq
paste
khirulnizam

Bookmark with local storage

khirulnizam
Aug 20th, 2019
171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.59 KB | None | 0 0
raw download clone embed print report
  1. //bookmark index.html
  2. <!DOCTYPE html>
  3. <html lang="en" dir="ltr">
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <title>Bookmark Saver</title>
  7.     <link rel="stylesheet" href="css/bootstrap.min.css">
  8.     <link rel="stylesheet" href="css/style.css">
  9.   </head>
  10.   <body>
  11.     <div class="hdr">
  12.       <h3 align="center" class="title">BOOKMARK SAVER</h3>
  13.     </div>
  14.  
  15.     <div class="user-form">
  16.       <form id="myForm">
  17.         <div class="form-group">
  18.           <label for="userName">Username :</label>
  19.           <input type="text" class="form-control" id="userName" placeholder="Enter your username">
  20.         </div>
  21.     </div>
  22.  
  23.     <div class="form">
  24.       <div class="form-group">
  25.         <label for="siteName">Site Name :</label>
  26.         <input type="text" class="form-control" id="siteName" placeholder="Enter your site name">
  27.       </div>
  28.       <div class="form-group">
  29.         <label for="siteURL">Site URL :</label>
  30.         <input type="text" class="form-control" id="siteURL" placeholder="Enter your site URL">
  31.       </div>
  32.       <button type="submit" class="btn btn-primary">SAVE</button>
  33.       <button type="reset" class="btn btn-primary">RESET</button>
  34.       </form>
  35.     </div>
  36.  
  37.     <button id="view" class="btn btn-primary" onclick="fetchBookmark(document.getElementById('userName').value)">VIEW</button>
  38.  
  39.     <div class="form">
  40.       <table class="table">
  41.         <h4 id="userTitle"></h4>
  42.         <thead class="thead-dark">
  43.           <th scope="col">Site Name</th>
  44.           <th scope="col">Site URL</th>
  45.           <th scope="col"></th>
  46.           <th scope="col"></th>
  47.         </thead>
  48.         <tbody id="myView"></tbody>
  49.       </table>
  50.     </div>
  51.  
  52.     <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  53.     <script type="text/javascript" src="js/main.js"></script>
  54.   </body>
  55. </html>
  56.  
  57.  
  58. //style.css
  59. .title{
  60.   background-color: lightgrey;
  61.   padding: 10px;
  62. }
  63.  
  64. .user-form{
  65.   margin-left: auto;
  66.   margin-right: auto;
  67.   margin-top: 5em;
  68.   background-color: lightgrey;
  69.   padding: 20px;
  70.   width: 70%;
  71.   border-radius: 10px;
  72. }
  73.  
  74. .form{
  75.   margin-left: auto;
  76.   margin-right: auto;
  77.   margin-top: 2em;
  78.   background-color: lightgrey;
  79.   padding: 20px;
  80.   width: 70%;
  81.   border-radius: 10px;
  82. }
  83.  
  84. .form-control{
  85.   width: 50%;
  86. }
  87.  
  88. #view{
  89.   margin-left: 50%;
  90.   margin-top: 20px;
  91. }
  92.  
  93. //main.js
  94. document.getElementById('myForm').addEventListener('submit', saveBookmark);
  95.  
  96. function saveBookmark(e){
  97.   window.userName= document.getElementById('userName').value;
  98.   var siteName = document.getElementById('siteName').value;
  99.   var siteURL = document.getElementById('siteURL').value;
  100.  
  101.   var bookmark={
  102.     website: siteName,
  103.     url : siteURL
  104.   }
  105.  
  106.   if (!userName || !siteName || !siteURL) {
  107.     alert('Please fill in all field');
  108.   }
  109.   else if (localStorage.getItem(userName)==null) {
  110.     users = [];
  111.  
  112.     users.push(bookmark);
  113.  
  114.     localStorage.setItem(userName, JSON.stringify(users));
  115.   }else {
  116.  
  117.     var addSite = JSON.parse(localStorage.getItem(userName));
  118.     for (var i = 0; i < addSite.length; i++) {
  119.      if (addSite[i].url == siteURL) {
  120.        alert('URL already exist!!');
  121.        return false;
  122.      }
  123.    }
  124.  
  125.    addSite.push(bookmark);
  126.  
  127.    localStorage.setItem(userName, JSON.stringify(addSite));
  128.  }
  129.  e.preventDefault();
  130.  fetchBookmark(userName);
  131.  document.getElementById('myForm').reset();
  132. }
  133.  
  134. function fetchBookmark(userName){
  135.  var bookmarks = JSON.parse(localStorage.getItem(userName));
  136.  
  137.  var result = document.getElementById('myView');
  138.  
  139.  var userTitle = document.getElementById('userTitle');
  140.  userTitle.innerHTML = "<h4>Bookmark For : "+userName+"</h4>";
  141.  
  142.   result.innerHTML = "";
  143.   if (bookmarks.length == 0) {
  144.     result.innerHTML += "<h4> No Bookmark Founded!</h4>";
  145.   }
  146.   else {
  147.     for (var i = 0; i < bookmarks.length; i++) {
  148.      var name = bookmarks[i].website;
  149.      var url = bookmarks[i].url;
  150.  
  151.      result.innerHTML += "<td>"+name+"</td>"+
  152.                           "<td>"+url+"</td>"+
  153.                           '<td>'+'<a class="btn btn-warning"+target="_blank" href="'+ url +'">VISIT</a>'+'</td>'+
  154.                           '<td>'+'<a onclick="deleteBookmark(\''+userName+'\',\''+url+'\')" class="btn btn-danger"+ href="#">DELETE</a>'+'</td>'
  155.                           +'<br>';
  156.     }
  157.   }
  158. }
  159.  
  160. function deleteBookmark(userName, url){
  161.   var bookmark = JSON.parse(localStorage.getItem(userName));
  162.  
  163.   for (var i = 0; i < bookmark.length; i++) {
  164.    if (bookmark[i].url == url) {
  165.      bookmark.splice(i,1);
  166.    }
  167.  }
  168.  localStorage.setItem(userName, JSON.stringify(bookmark));
  169.  fetchBookmark(userName);
  170. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!