kondasMajid/index.html

## index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Bookmark system</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>

  <body onload="fetchBookmarks()">
    <div class="container">
      <div class="jumbotron mt-3">
        <h1>Bookmark System</h1>

        <form id="myForm">
  <div class="form-group">

    <input type="text" class="form-control" id="siteName" aria-describedby="emailHelp" placeholder="Enter website name">

    <small id="emailHelp" class="form-text text-muted">Its good to save your booksmark</small>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
  </div>

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

      </div>
    </div>
<div class="row ">
      <div class="col-lg-12">
        <div id="bookmarksResult"></div>
<!--         <p>wjkkj wkjekjw kqwjewq</p> -->


     </div>
   </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
    <script


<!--     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

## savebookmark.markdown

      
    Raw
  

              savebookmark.markdown
            
          
    saveBookMark

A Pen by kondas Majid on CodePen.
License.

  
## script.js
document.getElementById('myForm').addEventListener('submit', saveBookMark);

function saveBookMark(e){
  // console.log('it worked');

  var siteName = document.getElementById('siteName').value;
  var siteUrl = document.getElementById('siteUrl').value;

  //validation of form
 if(!valideForm(siteName,siteUrl)){
   return false
 }

  var bookmark = {
    name: siteName,
    url: siteUrl
  }
  // test if storage is null
  if(localStorage.getItem('bookmarks') === null){
    // init array
    var bookmarks = [];

      // add bookmark into bookmarks;
  bookmarks.push(bookmark);
    // set local storrage to bopkmark
  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()
}


function deleteBookmarks(url){
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
   for(let i = 0; i < bookmarks.length; i++){
        if(bookmarks[i].url == url){
          bookmarks.splice(i, 1)
        }
   }


  //reset back to local storage after delete
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  console.log(url)


  //fetch bookmarks again
  fetchBookmarks()
}
 function fetchBookmarks(){
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    console.log(bookmarks);

   var bookmarksResult = document.getElementById('bookmarksResult');
   bookmarksResult.innerHTML = "";

   for(let i = 0; i < bookmarks.length; i++){
      var name = bookmarks[i].name;
     var url = bookmarks[i].url;

     bookmarksResult.innerHTML += '<div class="well card text-center" style="width: auto; text-align:center" > '+
     '<h3>' + name +
        '<a class="btn btn-success" target="_blank" href="' + url + '"> Visit</a> ' +
      ' <a class="btn btn-danger" onclick="deleteBookmarks(\'' + url + '\')"  href="' + url + '"> Delete</a>'
     '</h3>'+
     '</div>';

   }
  }


 function valideForm(siteName,siteUrl){
  if(!siteName || !siteUrl){
    alert('please fill out the forms')
    return false;
  }


  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 enter a correct URL')
    return false;
  }
   return true;
  }


   //  localStorage.setItem('test', 'Hello world')
 // console.log(localStorage.getItem('test'))
 //  console.log(localStorage.removeItem('test'))
  //console.log(bookmark)
  // console.log(siteUrl)

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="../../../../favicon.ico">

	<title>Bookmark system</title>

	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	</head>

	<body onload="fetchBookmarks()">
	<div class="container">
	<div class="jumbotron mt-3">
	<h1>Bookmark System</h1>

	<form id="myForm">
	<div class="form-group">

	<input type="text" class="form-control" id="siteName" aria-describedby="emailHelp" placeholder="Enter website name">

	<small id="emailHelp" class="form-text text-muted">Its good to save your booksmark</small>
	</div>
	<div class="form-group">
	<input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
	</div>

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

	</div>
	</div>
	<div class="row ">
	<div class="col-lg-12">
	<div id="bookmarksResult"></div>
	<!-- <p>wjkkj wkjekjw kqwjewq</p> -->


	</div>
	</div>

	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script
	src="http://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>
	<script


	<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script>window.jQuery \|\| document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	</body>
	</html>
	document.getElementById('myForm').addEventListener('submit', saveBookMark);

	function saveBookMark(e){
	// console.log('it worked');

	var siteName = document.getElementById('siteName').value;
	var siteUrl = document.getElementById('siteUrl').value;

	//validation of form
	if(!valideForm(siteName,siteUrl)){
	return false
	}

	var bookmark = {
	name: siteName,
	url: siteUrl
	}
	// test if storage is null
	if(localStorage.getItem('bookmarks') === null){
	// init array
	var bookmarks = [];

	// add bookmark into bookmarks;
	bookmarks.push(bookmark);
	// set local storrage to bopkmark
	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()
	}


	function deleteBookmarks(url){
	var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
	for(let i = 0; i < bookmarks.length; i++){
	if(bookmarks[i].url == url){
	bookmarks.splice(i, 1)
	}
	}


	//reset back to local storage after delete
	localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
	console.log(url)


	//fetch bookmarks again
	fetchBookmarks()
	}
	function fetchBookmarks(){
	var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
	console.log(bookmarks);

	var bookmarksResult = document.getElementById('bookmarksResult');
	bookmarksResult.innerHTML = "";

	for(let i = 0; i < bookmarks.length; i++){
	var name = bookmarks[i].name;
	var url = bookmarks[i].url;

	bookmarksResult.innerHTML += '<div class="well card text-center" style="width: auto; text-align:center" > '+
	'<h3>' + name +
	'<a class="btn btn-success" target="_blank" href="' + url + '"> Visit</a> ' +
	' <a class="btn btn-danger" onclick="deleteBookmarks(\'' + url + '\')" href="' + url + '"> Delete</a>'
	'</h3>'+
	'</div>';

	}
	}


	function valideForm(siteName,siteUrl){
	if(!siteName \|\| !siteUrl){
	alert('please fill out the forms')
	return false;
	}


	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 enter a correct URL')
	return false;
	}
	return true;
	}





















	// localStorage.setItem('test', 'Hello world')
	// console.log(localStorage.getItem('test'))
	// console.log(localStorage.removeItem('test'))
	//console.log(bookmark)
	// console.log(siteUrl)