JavaScriptProjectBookmarkApp/script2.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
constmodal=document.getElementById('modal');
constmodalShow=document.getElementById('show-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');

letbookmarks={};

// Show Modal, Focus on Input
functionshowModal(){
modal.classList.add('show-modal');
websiteNameEl.focus();
}

// Modal Event Listeners
modalShow.addEventListener('click',showModal);
modalClose.addEventListener('click',()=>modal.classList.remove('show-modal'));
window.addEventListener('click',(e)=>(e.target===modal ? modal.classList.remove('show-modal') : false));

// 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 a valid web address.');
returnfalse;
}
// Valid
returntrue;
}

// Build Bookmarks
functionbuildBookmarks(){
// Remove all bookmark elements
bookmarksContainer.textContent='';
// Build items
Object.keys(bookmarks).forEach((key)=>{

const{ name, url }=bookmarks[key];

// Item
constitem=document.createElement('div');
item.classList.add('item');
// Close Icon
constcloseIcon=document.createElement('i');
closeIcon.classList.add('fas','fa-trash-alt');
closeIcon.setAttribute('title','Delete Bookmark');
closeIcon.setAttribute('onclick',`deleteBookmark('${key}')`);
// 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 object in localStorage
constsomeUrl=`https://jtwebarchitect.com`
bookmarks[someUrl]={
name: 'Jampa Thinlay Tsarong',
url: 'https://jtwebarchitect.com',
}

localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
}
buildBookmarks();
}

// Delete Bookmark
functiondeleteBookmark(idd){
// Loop through the bookmarks array
if(bookmarks[idd]){
deletebookmarks[idd]
}
// Update bookmarks array in localStorage, re-populate DOM
localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
fetchBookmarks();
}

functionstoreBookmark(e){
e.preventDefault();
constnameValue=websiteNameEl.value;
leturlValue=websiteUrlEl.value;
if(!urlValue.includes('http://','https://')){
urlValue=`https://${urlValue}`;
}
// Validate
if(!validate(nameValue,urlValue)){
returnfalse;
}
// Set bookmark object, add to array
constbookmark={
name: nameValue,
url: urlValue,
};
bookmarks[urlValue]=bookmark;

// Set bookmarks in localStorage, fetch, reset input fields
localStorage.setItem('bookmarks',JSON.stringify(bookmarks));
fetchBookmarks();
bookmarkForm.reset();
websiteNameEl.focus();
}

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

// On Load, Fetch Bookmarks
fetchBookmarks();