BookMarker is a simple, user-friendly web app that allows users to save, manage, and organize their favorite website bookmarks. It offers intuitive features for adding, updating, and deleting bookmarks, with input validation and local storage persistence.
- π Add Bookmarks: Easily save websites by providing a name and URL.
- βοΈ Update Bookmarks: Modify existing bookmarks with a click.
- ποΈ Delete Bookmarks: Remove unwanted bookmarks from your list.
- π Visit Bookmarks: Open the saved websites directly in a new tab.
- β Input Validation: Ensures site names are at least 3 characters and URLs are valid.
β οΈ Duplicate Prevention: Prevents adding the same bookmark name or URL.- πΎ Persistent Storage: Bookmarks are saved using localStorage, so they persist across browser sessions.
- π± Responsive Design: Fully responsive layout using Bootstrap for seamless mobile and desktop experiences.
- π¬ User Feedback: Alerts for invalid inputs, powered by SweetAlert2.
- HTML: For structure and content.
- CSS: Custom styling for a clean, minimal design.
- Bootstrap: For responsive layout and UI components.
- Font Awesome: For icons in the user interface.
- SweetAlert2: For attractive and easy-to-use alert notifications.
- Google Fonts: Custom typography with Bree Serif, PT Sans Caption, Pacifico, and Righteous.
bookmarker/
βββ css/
β βββ all.min.css # Font Awesome styles
β βββ bootstrap.min.css # Bootstrap styles
β βββ style.css # Custom styles for the app
βββ img/
β βββ bookmark.png # Favicon for the app
βββ js/
β βββ bootstrap.bundle.min.js # Bootstrap's JS bundle
β βββ index.js # Core app logic
βββ index.html # Main HTML page
βββ README.md # Project documentation
-
Add Bookmark:
When the "Submit" button is clicked, the app validates the input (site name and URL), checks for duplicates, and saves the bookmark to localStorage. -
Update Bookmark:
When a bookmark is selected for editing, the app pre-fills the inputs and allows users to update the site name or URL. Changes are saved to localStorage. -
Delete Bookmark:
Users can remove bookmarks by clicking the "Delete" button, which updates the localStorage. -
Input Validation:
The app ensures that the site name has at least 3 characters and that the URL is valid (supportshttp://orhttps://). -
Prevent Duplicate Entries:
The app checks for existing bookmarks with the same name or URL before allowing a new bookmark to be added.
- Bootstrap for responsive design and mobile-first development.
- Font Awesome for providing a rich set of icons.
- SweetAlert2 for beautiful and customizable alerts.
- Google Fonts for clean and modern typography.
This project is licensed under the MIT License. See the LICENSE file for details.