add main-site
This commit is contained in:
GZod01
parent
0bcf58c844
commit
0a3a77a9ff
52 changed files with 11206 additions and 0 deletions
278
main-site/bookmark.html
Normal file
278
main-site/bookmark.html
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
<!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>
|
||||
Reference in a new issue