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
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" 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 #addB ookmark {
background-color : #007bff ;
color : #fff ;
border : none ;
padding : 10px 20px ;
cursor : pointer ;
font-weight : 600 ;
margin-left : 6px ;
} button #addB ookmark: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 #addB ookmark,
button#deleteAll {
margin-left : 0 ;
margin-bottom : 10px ;
}
} @media ( max-width : 345px ) {
main {
padding : 10px ;
}
.bookmark-form {
flex- direction : column;
}
input[type= "url" ],
button #addB ookmark,
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(
);
}
});
// 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(
);
}
});
} // Event listener for deleting a bookmark function addDeleteBookmarkListener(
bookmarkItem) {
const deleteButton =
bookmarkItem.querySelector( ".delete" );
deleteButton.addEventListener( "click" , () => { bookmarkItem.remove(); });
} |
Output: