https://github.com/mariamelashkar/bookmarker

The Bookmarker project is a web application that allows users to save, organize, and access their favorite websites conveniently. It features user-friendly input validation, local storage for data persistence, and an intuitive interface for managing bookmarks.
https://github.com/mariamelashkar/bookmarker

css html javascript tilwindcss

Last synced: 2 months ago
JSON representation

The Bookmarker project is a web application that allows users to save, organize, and access their favorite websites conveniently. It features user-friendly input validation, local storage for data persistence, and an intuitive interface for managing bookmarks.

• Host: GitHub
• URL: https://github.com/mariamelashkar/bookmarker
• Owner: mariamelashkar
• Created: 2024-11-21T10:53:14.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-12-19T21:57:39.000Z (5 months ago)
• Last Synced: 2025-01-26T08:28:24.600Z (4 months ago)
• Topics: css, html, javascript, tilwindcss
• Homepage: https://mariamelashkar.github.io/Bookmarker/
• Size: 3.27 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Bookmarker

⭐ **Bookmark your favorite sites with ease!** 🎉

The **Bookmarker** is a simple and elegant web application that helps you organize and manage your favorite websites. Save site names and URLs, validate inputs, and access your bookmarks anytime with local storage support.

---

## Features

- **Add Bookmarks**: Save site names and URLs easily.

- **Validation**: Ensure valid site names and URLs with built-in input validation.

- **Bookmark List**: View and manage your saved bookmarks in a structured table.

- **Visit Bookmarks**: Open bookmarked sites in a new tab with a single click.

- **Delete Bookmarks**: Remove bookmarks you no longer need.

- **Local Storage**: Data is stored locally, so bookmarks persist between sessions.

---

## How It Works

1. **Add a Bookmark**:

   - Enter the site name and URL in the form.

   - Click the "Submit" button to save it.

2. **View Bookmarks**:

   - Saved bookmarks appear in a table with options to visit or delete.

3. **Visit a Bookmark**:

   - Click the "Visit" button to open the site in a new tab.

4. **Delete a Bookmark**:

   - Click the "Delete" button to remove a bookmark from the list.

---

## Installation and Usage

### **Requirements**

- A modern web browser (e.g., Chrome, Firefox, Edge).

### **Steps**

1. Clone the repository or download the files.

2. Open the `index.html` file in your browser.

3. Start bookmarking your favorite sites!

---

## Technologies Used

- **HTML**: Structure of the web application.

- **CSS**: Styling using custom classes and external libraries.

- **JavaScript**: Input validation, local storage management, and bookmark functionality.

---

## Code Details

### **HTML Structure**

- The `index.html` file contains:

  - A navigation bar with a search field.

  - Input fields for site name and URL with validation alerts.

  - A table for displaying saved bookmarks.

### **JavaScript Functionality**

- The `main.js` file handles:

  - Bookmark creation, validation, and deletion.

  - Data persistence using `localStorage`.

  - Dynamic table rendering for displaying bookmarks.

---

## Future Enhancements

- Add tags or categories for better bookmark organization.

- Implement a search and filter feature for bookmarks.

- Enable users to edit existing bookmarks.

- Add dark mode for better accessibility.

---