279 lines
6 KiB
HTML
279 lines
6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Site Bookmarker</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
*{
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-family: sans-serif;
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: #333333;
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
text-decoration: none;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*Styling title*/
|
||
|
|
h1{
|
||
|
|
width: 100%;
|
||
|
|
height: 80px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 80px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: #47CF73;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
word-spacing: 8px;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
h2{
|
||
|
|
color: #47CF73;
|
||
|
|
}
|
||
|
|
.container{
|
||
|
|
width: 600px;
|
||
|
|
min-height: 150px;
|
||
|
|
background-color: #333333;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*Styling form section*/
|
||
|
|
.form{
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
background-color: #555555;
|
||
|
|
padding: 40px 50px;
|
||
|
|
margin: 20px 0;
|
||
|
|
|
||
|
|
}
|
||
|
|
.input-field{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.input-field input[type="text"]{
|
||
|
|
width: 250px;
|
||
|
|
height: 25px;
|
||
|
|
outline: none;
|
||
|
|
border: none;
|
||
|
|
background-color: transparent;
|
||
|
|
border-bottom: 2px solid #47CF73;
|
||
|
|
padding-left: 10px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.input-field label{
|
||
|
|
color: #47CF73;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.save_button{
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
border: none;
|
||
|
|
width: 70px;
|
||
|
|
height: 25px;
|
||
|
|
background-color: #47CF73;
|
||
|
|
color: #000;
|
||
|
|
cursor: pointer;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*Styling Bookmarks section*/
|
||
|
|
.bookmarks{
|
||
|
|
width: 100%;
|
||
|
|
background-color: #555555;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.bookmark{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 300px;
|
||
|
|
height: 40px;
|
||
|
|
padding: 5px 20px;
|
||
|
|
background-color: #FAFAFA;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
background-color: #333333;
|
||
|
|
}
|
||
|
|
.bookmark span{
|
||
|
|
flex: 1;
|
||
|
|
font-weight: bold;
|
||
|
|
letter-spacing: 1.5px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.bookmark .visit{
|
||
|
|
width: 50px;
|
||
|
|
height: 25px;
|
||
|
|
line-height: 25px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #47CF73;
|
||
|
|
color: #000;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin: 0 5px;
|
||
|
|
}
|
||
|
|
.bookmark .delete{
|
||
|
|
width: 60px;
|
||
|
|
height: 25px;
|
||
|
|
line-height: 25px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #F44336;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Site Bookmarker</h1>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<!-- form to enter details of site -->
|
||
|
|
<form class="form" method=post action="#">
|
||
|
|
<div class="input-field">
|
||
|
|
<label for="site_name">Name</label>
|
||
|
|
<input name="site_name" type="text"
|
||
|
|
placeholder="site name">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-field">
|
||
|
|
<label for="url">URL</label>
|
||
|
|
<input name="url" type="text"
|
||
|
|
placeholder="https://www.example.com">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="save_button">Save</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- section where bookmarks will be displayed -->
|
||
|
|
<h2>Saved Bookmarks</h2>
|
||
|
|
|
||
|
|
<div class="bookmarks"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- link the JavaScript file here -->
|
||
|
|
<script>
|
||
|
|
// Select the save button
|
||
|
|
var button = document.querySelector(".save_button");
|
||
|
|
|
||
|
|
// Select the input box
|
||
|
|
var siteName = document.querySelector("[name='site_name']");
|
||
|
|
var url = document.querySelector("[name='url']");
|
||
|
|
|
||
|
|
// Select the <div> with class="bookmarks"
|
||
|
|
var bookmarksSection = document.querySelector(".bookmarks");
|
||
|
|
|
||
|
|
// Hold bookmarks in local storage
|
||
|
|
if(typeof(localStorage.bookmark) == "undefined"){
|
||
|
|
localStorage.bookmark = "";
|
||
|
|
}
|
||
|
|
// listen for form submit
|
||
|
|
|
||
|
|
button.addEventListener("click", function(e){
|
||
|
|
|
||
|
|
// Prevent the page from reloading when submitting the form
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
let patterURL = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
|
||
|
|
|
||
|
|
let arrayItems, check = false, adr, itemAdr;
|
||
|
|
|
||
|
|
// Validation of form and URL
|
||
|
|
|
||
|
|
if(siteName.value === ""){
|
||
|
|
alert("you must fill the siteName input");
|
||
|
|
} else if(url.value === ""){
|
||
|
|
alert("you must fill the url input");
|
||
|
|
} else if(!patterURL.test(url.value)){
|
||
|
|
alert("you must enter a valid url");
|
||
|
|
} else{
|
||
|
|
|
||
|
|
arrayItems = localStorage.bookmark.split(";");
|
||
|
|
adr = url.value;
|
||
|
|
adr = adr.replace(/http:\/\/|https:\/\//i, "");
|
||
|
|
arrayItems.length--;
|
||
|
|
|
||
|
|
// Check if website is already bookmarked
|
||
|
|
for(item of arrayItems){
|
||
|
|
itemAdr = item.split(',')[1].replace(/http:\/\/|https:\/\//i,"");
|
||
|
|
if(itemAdr == adr){
|
||
|
|
check = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if(check == true){
|
||
|
|
alert("This website is already bookmarked");
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
|
||
|
|
// If all checks are correct,add bookmark to local storage
|
||
|
|
localStorage.bookmark += `${siteName.value},${url.value};`;
|
||
|
|
addBookmark(siteName.value, url.value);
|
||
|
|
siteName.value = "";
|
||
|
|
url.value = "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Function to add the bookmark
|
||
|
|
|
||
|
|
function addBookmark(name, url){
|
||
|
|
let dataLink = url;
|
||
|
|
|
||
|
|
// After obtaining a bookmark, we display it in a div and add
|
||
|
|
// a button to visit the link or to delete it
|
||
|
|
if(!url.includes("http")){
|
||
|
|
url = "//" + url;
|
||
|
|
}
|
||
|
|
let item = `<div class="bookmark">
|
||
|
|
<span>${name}</span>
|
||
|
|
<a class="visit" href="${url}" target="_blank"
|
||
|
|
data-link='${dataLink}'>Visit</a>
|
||
|
|
<a onclick="removeBookmark(this)"
|
||
|
|
class="delete" href="#">delete</a>
|
||
|
|
</div>`;
|
||
|
|
bookmarksSection.innerHTML += item;
|
||
|
|
}
|
||
|
|
// function to render the saved bookmarks
|
||
|
|
|
||
|
|
(function fetchBoookmark(){
|
||
|
|
if(typeof(localStorage.bookmark) != "undefined" && localStorage.bookmark !== ""){
|
||
|
|
let arrayItems = localStorage.bookmark.split(";");
|
||
|
|
arrayItems.length--;
|
||
|
|
for(item of arrayItems){
|
||
|
|
let itemSpli = item.split(',');
|
||
|
|
addBookmark(itemSpli[0], itemSpli[1]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
// Function to remove the bookmark
|
||
|
|
|
||
|
|
function removeBookmark(thisItem){
|
||
|
|
let arrayItems = [],
|
||
|
|
index,
|
||
|
|
item = thisItem.parentNode,
|
||
|
|
itemURL = item.querySelector(".visit").dataset.link,
|
||
|
|
itemName = item.querySelector("span").innerHTML;
|
||
|
|
arrayItems = localStorage.bookmark.split(";");
|
||
|
|
|
||
|
|
for(i in arrayItems){
|
||
|
|
if(arrayItems[i] == `${itemName},${itemURL}`){
|
||
|
|
index = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//update the localStorage
|
||
|
|
index = arrayItems.indexOf(`${itemName},${itemURL}`);
|
||
|
|
arrayItems.splice(index,1);
|
||
|
|
localStorage.bookmark = arrayItems.join(";");
|
||
|
|
|
||
|
|
//update the bookmark Section
|
||
|
|
bookmarksSection.removeChild(item);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|