GeezerVison is showing github.com — JavaScriptProjectBookmarkApp/script2.js at master · jthinlay/JavaScriptProjectBookmarkApp

Expand file tree

script2.js

Copy path

More file actions

Latest commit

History

133 lines (118 loc) · 3.86 KB

script2.js

Copy path

File metadata and controls

133 lines (118 loc) · 3.86 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

const modal = document.getElementById('modal');

const modalShow = document.getElementById('show-modal');

const modalClose = document.getElementById('close-modal');

const bookmarkForm = document.getElementById('bookmark-form');

const websiteNameEl = document.getElementById('website-name');

const websiteUrlEl = document.getElementById('website-url');

const bookmarksContainer = document.getElementById('bookmarks-container');

let bookmarks = {};

// Show Modal, Focus on Input

function showModal() {

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

function validate(nameValue, urlValue) {

const expression = /(https)?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;

const regex = new RegExp(expression);

if (!nameValue || !urlValue) {

alert('Please submit values for both fields.');

return false;

}

if (!urlValue.match(regex)) {

alert('Please provide a valid web address.');

return false;

}

// Valid

return true;

}

// Build Bookmarks

function buildBookmarks() {

// Remove all bookmark elements

bookmarksContainer.textContent = '';

// Build items

Object.keys(bookmarks).forEach((key) => {

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

// Item

const item = document.createElement('div');

item.classList.add('item');

// Close Icon

const closeIcon = document.createElement('i');

closeIcon.classList.add('fas', 'fa-trash-alt');

closeIcon.setAttribute('title', 'Delete Bookmark');

closeIcon.setAttribute('onclick', `deleteBookmark('${key}')`);

// Favicon / Link Container

const linkInfo = document.createElement('div');

linkInfo.classList.add('name');

// Favicon

const favicon = document.createElement('img');

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

favicon.setAttribute('alt', 'Favicon');

// Link

const link = 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

function fetchBookmarks() {

// Get bookmarks from localStorage if available

if (localStorage.getItem('bookmarks')) {

bookmarks = JSON.parse(localStorage.getItem('bookmarks'));

} else {

// Create bookmarks object in localStorage

const someUrl = `https://jtwebarchitect.com`

bookmarks[someUrl] = {

name: 'Jampa Thinlay Tsarong',

url: 'https://jtwebarchitect.com',

}

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

}

buildBookmarks();

}

// Delete Bookmark

function deleteBookmark(idd) {

// Loop through the bookmarks array

if (bookmarks[idd]) {

delete bookmarks[idd]

}

// Update bookmarks array in localStorage, re-populate DOM

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

fetchBookmarks();

}

function storeBookmark(e) {

e.preventDefault();

const nameValue = websiteNameEl.value;

let urlValue = websiteUrlEl.value;

if (!urlValue.includes('http://', 'https://')) {

urlValue = `https://${urlValue}`;

}

// Validate

if (!validate(nameValue, urlValue)) {

return false;

}

// Set bookmark object, add to array

const bookmark = {

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();