Open In App

Create a Bookmark Landing Page using HTML CSS and JavaScript

Last Updated : 25 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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 JavaScript

Output:


Create a Bookmark Landing Page using HTML CSS and JavaScript
Next Article

Similar Reads