Skip to content

Latest commit

 

History

History

Project 05 - Bookmark Saver

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
demo.gif
demo.gif
 
 
index.html
index.html
 
 
script.js
script.js
 
 
style.css
style.css
 
 

README.md

Bookmark Saver

A clean and modern bookmark management application built with vanilla HTML, CSS, and JavaScript featuring localStorage persistence and URL validation.

Demo

Bookmark Saver Demo

Features

  • Add bookmarks with custom names and URLs
  • Automatic URL validation (requires http:// or https://)
  • Delete bookmarks with a single click
  • Data persistence using localStorage
  • Modern purple/blue gradient theme
  • Asymmetric border radius design (top-right & bottom-left corners)
  • Smooth animations and hover effects
  • Clean, compact UI with Inter font

How to Run

Simply open index.html in your web browser.

Project Structure

.
├── index.html    # main HTML structure
├── style.css     # styling with CSS variables and asymmetric design
├── script.js     # bookmark management and localStorage
└── demo.gif      # demo recording

Technologies Used

  • HTML5
  • CSS3 (Flexbox, CSS Variables, Transitions)
  • JavaScript (ES6+)
  • localStorage API for data persistence
  • Inter font family

Key Functionality

  • Add Bookmarks: Enter name and URL, automatically validated
  • Delete Bookmarks: Click "Remove" button on any bookmark
  • Data Persistence: All bookmarks saved to localStorage automatically
  • URL Validation: Ensures all URLs start with http:// or https://
  • Asymmetric Design: Unique border radius pattern (0 20px 0 20px)