Возможности:

Добавить пользовательскую закладку с названием и ссылкой

Удалить закладки

данные в localStorage

КОД Гитхаб

ДЕМО

HTML

show-modal — это дополнительная кнопка.

bookmarks-container включает в себя все новые встроенные закладки со значками логотипов и ссылками.

модальный контейнер — это полноэкранный фон.

modal — это форма для отправки содержимого закладки.

значок корзины справа от источника шрифта awesome icon.

CSS

шрифты из шрифта Google.

установить базовые корневые стили.

Кнопка надстройкиДобавить

Контейнер закладок включает карточки со значком, ссылкой и кнопкой удаления.

Для отзывчивого маленького экрана. карта растягивается на всю строку.

Когда вы нажимаете кнопку надстройки, модальный прыгает вверх с отправкой.

Форма имеет два входа и метки, которые можно хранить в локальном хранилище.

ЯВАСКРИПТ

Выберите все DOM

Скройте модальное окно, прежде чем нажимать кнопку надстройки.

При нажатии на фон, который не включает модальное окно, модальное окно должно быть скрыто.

При нажатии кнопки отправки формы выполняется функция storeBookmark.

Введенное имя и URL должны быть проверены с помощью функции validate().

а также добавьте https://, если содержимое не включено.

Проверьте введенное значение с помощью выражения Reg, выражение предназначено для проверки форматов адресов электронной почты.

Если верно, продолжайте.

Если нет, предупредите и остановите следующий сеанс.

Если это правда, buildBookmarks().

зациклите массив закладок и добавьте dom и атрибуты с помощью «createElement», «classList.add» и «setAttributes».

И добавьте все элементы и атрибуты в DOM.

Получить закладки из localStorage, если данные не пустые, затем загрузить все в массив закладок или установить исходный.

При нажатии правой кнопки корзины в модальном окне выберите индекс массива и удалите с помощью splice(). Затем также обновите в loacalStorage.Then freshbookmarks(), чтобы получить все обновленные закладки.