JavaScriptProjectBookmarkApp/script.js at master · jthinlay/JavaScriptProjectBookmarkApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
constmodalShow=document.getElementById('show-modal');
constmodalContainer=document.getElementById('modal');
constmodalClose=document.getElementById('close-modal');
constbookmarkForm=document.getElementById('bookmark-form');
constwebsiteNameEl=document.getElementById('website-name');
constwebsiteUrlEl=document.getElementById('website-url');
constbookmarksContainer=document.getElementById('bookmarks-container');

// Show Modal, Focus on Input
functionshowmodal(){
modalContainer.classList.add('show-modal');
websiteNameEl.focus();
}
// Modal Event Listeners
modalShow.addEventListener('click',showmodal);
modalClose.addEventListener('click',()=>{modalContainer.classList.remove('show-modal')});
window.addEventListener('click',(e)=>{e.target===modalContainer ? modalContainer.classList.remove('show-modal') : false});

letbookmarks={};

// Validate Form
functionvalidate(nameValue,urlValue){
constexpression=/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
constregex=newRegExp(expression);
if(!nameValue||!urlValue){
alert("Please submit values for both fields.");
returnfalse;
}
if(!urlValue.match(regex)){
alert("Please provide website address");
returnfalse;
}
// valid
returntrue;
}

// Build Bookmarks DOM
functionbuildBookmarks(){

// Remove all bookmark elements
bookmarksContainer.textContent='';

// Build items
bookmarks.forEach((bookmark)=>{
const{name, url }=bookmark;
// Item
constitem=document.createElement('div');
item.classList.add('item');

// CloseIcon
constcloseIcon=document.createElement('i');
closeIcon.classList.add('fas','fa-trash-alt');
closeIcon.setAttribute('title','Delete Bookmark');
closeIcon.setAttribute('onClick',`deleteBookmark('${url}')`);

// Favicon / Link Container
constlinkInfo=document.createElement('div');
linkInfo.classList.add('name');

// Favicon
constfavicon=document.createElement('img');
favicon.setAttribute('src',`https://s2.googleusercontent.com/s2/favicons?domain=${url}`);
favicon.setAttribute('alt','Favicon');

// Link
constlink=document.createElement('a');
link.setAttribute('href',`${url}`);
link.setAttribute('target','_blank');
link.textContent=name;

// Append to bookmarks container
linkInfo.append(favicon,link);
item.append(closeIcon,linkInfo);
bookmarksContainer.appendChild(item);
});
}
// Fetch Bookmarks
functionfetchBookmarks(){
// Get bookmarks from localStorage if available
if(localStorage.getItem('bookmarks')){
bookmarks=JSON.parse(localStorage.getItem('bookmarks'));
}else{
// Create bookmarks array in localStorage
bookmarks={

name: 'jtwebarchitect',
url: 'https://www.jtwebarchitect.com',
};
localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
}
buildBookmarks();
}

// Delete Bookmarks
functiondeleteBookmark(url){
bookmarks.forEach((bookmark,i)=>{
if(bookmark.url===url){
bookmarks.splice(i,1);
}
});
// Update bookmarks array in localStorage, re-populate DOM
localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
fetchBookmarks();

// Remove bookmarks if there is no values
letlocalStorageItem=JSON.parse(localStorage.getItem('bookmarks')).length;
if(localStorageItem===0){
localStorage.removeItem('bookmarks');
}
}
// Handle Data from Form
functionstoreBookmark(e){
e.preventDefault();
constnameValue=websiteNameEl.value;
leturlValue=websiteUrlEl.value;

if(!urlValue.includes('http://','https://')){
urlValue=`https://${urlValue}`;
}
if(!validate(nameValue,urlValue)){
returnfalse;
}
constbookmark={
name: nameValue,
url: urlValue,
};
bookmarks.push(bookmark);

localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
fetchBookmarks();
bookmarkForm.reset();
websiteNameEl.focus();
};

// Event Listener
bookmarkForm.addEventListener('submit',storeBookmark);

// On Load, Fetch Bookmarks
fetchBookmarks();