Bookmarks with Javascript

 

Features:

Add custom bookmark with name and link

Delete bookmarks

the data in the localStorage

CODE Github

DEMO

HTML

show-modal is a addon button .

bookmarks-container includes all the new built bookmarks with logo icons and links.

modal-container is full screen background. 

modal is the form to submit content of bookmark.

the trash icon on the right conner source from font awesome icon.

CSS

fonts from Google font.

set basic root styles.

The add-on buttonAdd

 

bookmark container includes the cards with icon,link and delete button.

For responsive small screen . the card strechs whole line.

When click add-on button,the modal jump up with submission .

The form has two inputs and labels which can be stored in the localstorage.

JAVASCRIPT

Select all the DOM

Hide the modal before click the add-on button.

When click the background,which is not include modal, the modal should be hidden. 

When click the submit form button, the function storeBookmark excutes.

The name and url typed in should be checked validation with the validate() function. 

and also add the https:// if the content not included. 

Validate the typed value with Reg expression, the expression is for checking the email address formats.

If true,continue.

If not,alert and stop next session.

If true,buildBookmarks().

loop the bookmarks array and add the dom and attributes with "createElement" ,"classList.add" and "setAttributes". 

And append all the elemtent and attributes to the DOM.

Fetch bookmarks from the localStorage,if the data is not empty,then fetch all to the bookmarks array,or set the original one . 

When click the right trash button in the modal box,select the index of array and delete with splice(). Then also update in the loacalStorage.Then freshbookmarks() to fetch all the updated bookmarks.