vanilla js

anilv9 · Oct 14, 2020 · ac76424 · ac76424
1 parent 0c8313c
commit ac76424
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 0 deletions.
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Bookmarker</title>
+    <!-- Bootstrap core CSS -->
+<link href="css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" href="styles.css">
+  </head>
+  <body onload="fetchBookmarks()">
+  <!-- Main jumbotron for a primary marketing message or call to action -->
+  <div class="jumbotron">
+    <div class="container">
+      <h1 class="display-6">Bookmark your favorite sites</h1>
+      <form id="myForm">
+        <div class="form-group">
+          <label>Site Name</label>
+          <input type="text" class="form-control" id="siteName" placeholder="Website name">
+        </div>
+      <!-- </form> -->
+      <!-- <form id="myForm"> -->
+        <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>
+
+  <div class="container">
+    <!-- Example row of columns -->
+    <div class="row marketing">
+      <div class="col-lg-12">
+        <div id="bookmarksResults">
+
+        </div>
+      </div>
+    </div>
+  </div>
+  <hr>
+
+<footer class="container">
+  <p>&copy; Bookmarker 2020</p>
+</footer>
+<script
+  src="https://code.jquery.com/jquery-3.5.1.js"
+  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
+  crossorigin="anonymous"></script>
+<script src="js/bootstrap.min.js"></script>
+<script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,104 @@
+//listen for form submit
+
+document.getElementById('myForm').addEventListener('submit', saveBookmark);
+
+function saveBookmark(e){
+  //save bookmark
+  //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
+  }
+  //local storage test
+//   localStorage.setItem('test', 'hello world');
+//   console.log(localStorage.getItem('test')); 
+//   localStorage.removeItem('test');
+// console.log(localStorage.removeItem('test'));
+  if(localStorage.getItem('bookmarks')=== null){
+
+    //init array
+    var bookmarks=[];
+    //add bookmark
+      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 bookmark to array
+    bookmarks.push(bookmark);
+    //reset it to localstorage
+    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+    document.getElementById('myForm').reset();
+    //re fetch bookmarks
+  fetchBookmarks();
+  }
+
+  // console.log(bookmark);
+  // console.log(siteName);
+  // console.log(siteUrl);
+
+  // console.log('it prints');
+  //prevent form submit
+  e.preventDefault();
+}
+
+//delete book mark
+function deleteBookmark(url){
+  // console.log(url);
+  var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
+  //loop thru
+  for(var i=0; i < bookmarks.length; i++){
+    if(bookmarks[i].url === url){
+      bookmarks.splice(i, 1);
+    }
+  }
+  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+
+//re fetch bookmarks
+  fetchBookmarks();
+}
+
+//fetch bookmarks
+function fetchBookmarks(){
+  var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
+  // console.log(bookmarks);
+  //get output id
+  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-primary" target="_blank" href="'+url+'">Visit</a>'+
+              '<a onclick="deleteBookmark(\''+url+'\')" class="btn btn-danger" href="#">Delete</a>'
+              '</h3>'+
+              '</div>'; 
+
+  }
+
+}
+function validateForm(siteName, siteUrl){
+  if(!siteName || !siteUrl){
+    alert('pls fill details');
+    return false;
+  }
+
+  var expression = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
+  var regex = new RegExp(expression);
+  if(!siteUrl.match(regex)){
+    alert("use valid")
+    return false;
+  }
+  return true;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,17 @@
+/* body {
+  padding-top: 3.5rem;
+}
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    } */