تفاصيل العمل

This project is about creating a Bookmark Manager Web App that allows users to save, view, visit, and delete their favorite websites directly from the browser. It's a simple front-end-only application designed to demonstrate DOM manipulation and the use of local Storage

Technologies Used:

HTML

Used to create the structure of the web page.

Includes input fields (Site Name and Site URL), a submit button, and a table to display bookmarks.

CSS

Used for styling the layout, colors, fonts, and responsiveness.

Ensures that the app looks clean and works well on both desktop and mobile devices.

JavaScript

Handles the logic and interactivity:

Form validation.

Saving data to localStorage.

Rendering the list of saved bookmarks.

Handling "Visit" and "Delete" actions.

Automatically loading saved bookmarks when the page is reloaded.

Detailed Explanation of What the App Does:

User Interface (UI):

A header section with the app title and a short description.

Two input fields:

Site Name – for entering the name of the website.

Site URL – for entering the full website link.

A Submit button to add the bookmark.

A section below showing a table that lists all saved bookmarks.

Bookmark Table Columns:

Index: The order number of the saved bookmark.

Website Name: The name entered by the user.

Visit: A button that opens the website in a new tab.

Delete: A button that removes the bookmark from both the screen and local Storage.

Functionality:

When the user clicks "Submit":

The app checks that both fields are filled.

The data is stored in the browser using local Storage.

The bookmark is shown immediately in the table.

When the user refreshes the page:

The app loads bookmarks from localStorage and displays them.

When the user clicks "Delete":

That specific bookmark is removed from localStorage and the UI is updated.

The "Visit" button opens the link using window.open().

Key Features:

Fully functional using only front-end technologies.

Works offline and doesn't require any server or backend.

Lightweight and fast.

Clean and responsive UI.

بطاقة العمل

اسم المستقل
عدد الإعجابات
0
عدد المشاهدات
20
تاريخ الإضافة
المهارات