Skip to content

πŸ”– BookMarker – Keep your favorite websites organized with a simple and user-friendly bookmark manager. πŸ“Ž

Notifications You must be signed in to change notification settings

Michael-Moris/BookMarker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

BookMarker πŸ“‘

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.


Features ✨

  • πŸ”– 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.

Built With πŸ› οΈ

  • 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.

Folder Structure πŸ“‚

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

JavaScript Functions πŸ–₯️

  • 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 (supports http:// or https://).

  • Prevent Duplicate Entries:
    The app checks for existing bookmarks with the same name or URL before allowing a new bookmark to be added.


Acknowledgments πŸ™

  • 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.

License πŸ”‘

This project is licensed under the MIT License. See the LICENSE file for details.

About

πŸ”– BookMarker – Keep your favorite websites organized with a simple and user-friendly bookmark manager. πŸ“Ž

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published