Create a Bookmark Landing Page using HTML CSS and JavaScript

Last Updated : 02 Nov, 2023

In this article, we are going to implement a Bookmark Landing Page using HTML, CSS, and JavaScript. Users can effortlessly add, manage, and remove bookmarks, resulting in a tidy digital library for their favorite websites. Bookmarking the Landing Page refers to a web page or website where the users bookmark the website, in order to save it in their web browser for easy and quick access.

Final Output

Web-capture_18-10-2023_91451_-(1)

Prerequisites

Approach

Create a new project folder and organize it with the following files: index.html, styles.css, and script.js.
Open index.html in a code editor and create the basic HTML structure. Include a header, a form for input, and an empty list for bookmarks.
If the URL is not empty (form validations are successful).
It creates a new list item (<li>) element to represent the bookmark.
It adds the class “bookmark-item” to the list item to apply CSS styling.
It sets the HTML content of the list item, including an anchor (<a>) element for the URL and a “Delete” button.
It appends the newly created list item to the list of bookmarks.
It clears the input field for the next bookmark entry.
It calls the addDeleteBookmarkListener function to add an event listener to the “Delete” button.
When the “Delete” button is clicked, the associated bookmark item is removed from the list of bookmarks.
In the styles.css file, add CSS rules to style your page. Use classes and IDs to target specific elements and make the design visually appealing.
In the script.js file, start by adding an event listener to handle adding bookmarks.

Example: Below is the implementation of the Bookmark Landing Page using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Bookmark Landing Page</title> 
    <link rel="stylesheet" 
          href="styles.css"> 
</head> 
  
<body> 
    <header> 
        <h1>My Bookmarks</h1> 
    </header> 
    <main> 
        <section class="bookmark-form"> 
            <input type="url" 
                   name="url" 
                   id="urlInput" 
                   placeholder="Enter URL" 
                   pattern="https://.*" 
                   size="50" 
                   required> 
            <button id="addBookmark"> 
                Add Bookmark 
            </button> 
            <button id="deleteAll"> 
                Delete All Bookmarks 
            </button> 
        </section> 
        <section class="bookmarks"> 
            <ul id="bookmarkList"> 
                
<!-- Bookmarks will be added here dynamically -->
            </ul> 
        </section> 
    </main> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* styles.css */
body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    background-color: #f4f4f4; 
} 
  
header { 
    width: 100%; 
    background-color: #333; 
    color: #fff; 
    text-align: center; 
    padding: 10px; 
} 
  
main { 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 20px; 
} 
  
.bookmark-form { 
    display: flex; 
    margin-bottom: 10px; 
} 
  
input[type="url"] { 
    flex: 1; 
    padding: 10px; 
} 
  
button#addBookmark { 
    background-color: #007bff; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    font-weight: 600; 
    margin-left: 6px; 
} 
  
button#addBookmark:hover { 
    background-color: #160af3; 
} 
  
button#deleteAll { 
    background-color: #ff6347; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    margin-left: 10px; 
    font-weight: 600; 
} 
  
button#deleteAll:hover { 
    background-color: #f80404; 
} 
  
.bookmark-item { 
    background-color: #f5f5f5; 
    padding: 10px; 
    border: 2px solid #1d22b3; 
    border-radius: 5px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px; 
    background-color: #e6f2f5; 
} 
  
.bookmark-item a { 
    text-decoration: none; 
    color: #0d0d0d; 
} 
  
.bookmark-item a:hover { 
    text-decoration: underline; 
} 
  
/* Style the "Delete" button */
.delete { 
    background-color: #ff6347; /* Red color */
    color: #fff; /* White text color */
    border: none; 
    padding: 5px 5px; 
    border-radius: 5px; 
    font-size: medium; 
    cursor: pointer; 
    margin-left: 5px; 
} 
  
.delete:hover { 
    background-color: #f80404; 
} 
  
.edit { 
    background-color: #6947ff; /* Red color */
    color: #fff; /* White text color */
    border: none; 
    padding: 5px 15px; 
    border-radius: 5px; 
    font-size: medium; 
    cursor: pointer; 
} 
  
.edit:hover { 
    background-color: #4b0da3; 
} 
  
ul { 
    list-style: none; 
    padding: 0; 
} 
  
li { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 10px; 
} 
  
a { 
    text-decoration: none; 
    color: #333; 
} 
  
a:hover { 
    text-decoration: underline; 
    color: rgb(40, 130, 189); 
} 
  
@media (max-width: 768px) { 
    main { 
        padding: 10px; 
    } 
  
    .bookmark-form { 
        flex-direction: column; 
    } 
  
    input[type="url"], 
    button#addBookmark, 
    button#deleteAll { 
        margin-left: 0; 
        margin-bottom: 10px; 
    } 
} 
  
@media (max-width: 345px) { 
    main { 
        padding: 10px; 
    } 
  
    .bookmark-form { 
        flex-direction: column; 
    } 
  
    input[type="url"], 
    button#addBookmark, 
    button#deleteAll { 
        margin-left: 0; 
    } 
}

Javascript

// Script.js 
  
// Get DOM elements 
const urlInput =  
    document.getElementById("urlInput"); 
const addBookmarkButton = 
    document.getElementById("addBookmark"); 
const deleteAllButton =  
    document.getElementById("deleteAll"); 
const bookmarkList =  
    document.getElementById("bookmarkList"); 
  
// Function to validate URLs 
function isValidURL(url) { 
    const pattern = 
        /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?$/; 
    return pattern.test(url); 
} 
  
// Event listener for adding a bookmark 
addBookmarkButton.addEventListener( 
    "click", () => { 
        const url = urlInput.value.trim(); 
        if (isValidURL(url)) { 
            const bookmarkItem = document.createElement("li"); 
            bookmarkItem.classList.add("bookmark-item"); 
            bookmarkItem.innerHTML =  
            `<a href="${url}" taret="_blank">${url}</a> 
             <div class="buttons">  
                 <button class="edit"g>Edit</button> 
                 <button class="delete">Delete</button> 
             </div>`; 
            bookmarkList.appendChild(bookmarkItem); 
            urlInput.value = ""; 
            addEditBookmarkListener(bookmarkItem); 
            addDeleteBookmarkListener(bookmarkItem); 
        } 
        else { 
            alert( 
                "Please enter a valid URL (http:// or https://)."
            ); 
        } 
    }); 
  
// Event listener for deleting all bookmarks 
deleteAllButton.addEventListener( 
    "click", () => { 
        while ( 
            bookmarkList.firstChild) { 
            bookmarkList.removeChild 
                (bookmarkList.firstChild) 
        } 
    }); 
  
// Event listener for editing bookmarks 
function addEditBookmarkListener( 
    bookmarkItem) { 
    const editButton =  
        bookmarkItem.querySelector(".edit"); 
    const bookmarkLink =  
        bookmarkItem.querySelector("a"); 
  
    editButton.addEventListener( 
        "click", () => { 
            const newURL = prompt("Edit the URL:", 
                bookmarkLink.getAttribute("href")); 
            if (newURL && isValidURL(newURL)) { 
                bookmarkLink.setAttribute("href", newURL); 
                bookmarkLink.innerHTML = newURL; 
            } 
            else if (newURL) { 
                alert( 
                    "Please enter a valid URL (http:// or https://)."
                ); 
            } 
        }); 
} 
  
// Event listener for deleting a bookmark 
function addDeleteBookmarkListener( 
    bookmarkItem) { 
    const deleteButton =  
        bookmarkItem.querySelector(".delete"); 
    deleteButton.addEventListener("click", () => { bookmarkItem.remove(); }); 
}