Сохранить закладку

Давайте посмотрим, что в программе……

Появится текстовое поле, в котором будет указано имя закладки. Будет еще одно текстовое поле, в котором адрес закладки (URL) будет указан пользователем. Там будет кнопка, которая сохранит закладку после нажатия, и она появится в поле ниже. Оттуда мы можем посетить сохраненный адрес, если захотим, затем мы можем удалить сохраненный адрес.

Прежде всего, используйте Bootstrap для дизайна. Загрузите с http://getbootstrap.com/ и используйте (версия 3.3.7). Затем мы спроектируем тестовую коробку и кнопки через Jumbotron.

<!DOCTYPE html>
<!-- Shakib Limon -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript"></script>

    <title>Site Bookmarker</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

   
  </head>

  <body onload="fetchBookmarks()" >

    <div class="container">
      <div class="header clearfix">
        <h3 class="text-muted">Bookmarker</h3>
      </div>

      <div class="jumbotron">
        <h3>Bookmark Your Site</h3>
        <form id="myForm">

        	<div class="form-group">
	        	<lebel>Site Name</lebel>
	        	<input type="text" class="form-control" id="siteName" placeholder="Website Name">
        	</div>

        	<div class="form-group">
        		<label>Site URL</label>
        		<input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
        	</div>

        	<button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

      <div class="row marketing">
        <div class="col-lg-12">
          <div id="bookmarksResults">
          	
          </div>
        </div>
      </div>

      <footer class="footer">
        <p>&copy;2017 Bookmarker <i>by</i> Shakib Limon</p>
      </footer>

    </div> <!-- /container -->

     <script
    src="https://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Работа над дизайном завершена, в браузере видно, но кнопка не работает, как дела? Причина не работает, пока не устанавливайте действие кнопки.

Теперь давайте настроим закладку для сохранения функции закладок……

/* Save,delete and fetch bookmark content with JSON */
// Listen for form submit
document.getElementById('myForm').addEventListener('submit', saveBookmark);

// Save Bookmark
function saveBookmark(e){
  // 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
  }


  if(localStorage.getItem('bookmarks') === null){
    var bookmarks = [];
    bookmarks.push(bookmark);
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  } else {

    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    bookmarks.push(bookmark);
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }
  document.getElementById('myForm').reset();
  fetchBookmarks();
  e.preventDefault();
}

Удаление закладок…….

// Delete bookmark
function deleteBookmark(url){
  var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
  for(var i =0;i < bookmarks.length;i++){
    if(bookmarks[i].url == url){
      bookmarks.splice(i, 1);
    }
  }
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  fetchBookmarks();
}

Чтобы отобразить сохраненные данные закладок из локального хранилища браузера, необходимо получить эти данные. А также будет посетить и удалить кнопки.

// Fetch bookmarks
function fetchBookmarks(){
  var bookmarks = JSON.parse(localStorage.getItem('bookmarks')); 
  var bookmarksResults = document.getElementById('bookmarksResults');
  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>';
  }
}

Теперь проверим форму ……….

// Validate Form
function validateForm(siteName, siteUrl){
  if(!siteName || !siteUrl){
    alert('Please fill the form first then click submit ');
    return false;
  }
// using regular expression here  for 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  write valid URL here ');
    return false;
  }

  return true;
}

Результат выглядит следующим образом:

#Счастливого обучения

Сохранить закладку

Похожие вопросы