Create a Bookmark Landing Page using HTML CSS and JavaScript
Last Updated :
25 Jul, 2024
Improve
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
.jpg)
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.
<!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>
/* 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;
}
}
// 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(); });
}
Output:
