Quick Access Pins are a useful feature in web applications that allow users to save and quickly access their favorite or frequently visited websites, tools, or pages. These pins provide a convenient and efficient way to navigate a website or web application. In this post, we will create a Quick Access PIN using HTML, CSS, and JavaScript.
Prerequisite:
Approach:
- create a static HTML structure with predefined pinned items.
- Design a simple layout with the pinned items.
- Use HTML to create pins and provide links.
- Style the pins using the CSS for an attractive appearance.
- Use JavaScript for the navigation when a pin is clicked.
Example: Below is the basic implementation of the above project
Javascript
const pinContainer = document.getElementById( 'pin-container' );
const pinnedItems = [ {
title: 'Website' ,
},
{
title: 'Email' ,
url: 'mailto:example@example.com' , icon: '✉️'
},
{
title: 'Notes' ,
},
]; function create(item) {
const pin = document.createElement( 'div' );
pin.classList.add( 'pin' );
pin.innerHTML =
`<div>${item.icon}</div><div>${item.title}</div>`;
pin.addEventListener( 'click' , () => {
window.location.href = item.url;
});
pinContainer.appendChild(pin);
} pinnedItems.forEach(create); |
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >The Quick Access Pin</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< header >
< h1 >Quick Access Pin</ h1 >
</ header >
< main >
< div class = "pin-container" id = "pin-container" >
</ div >
</ main >
< script src = "script.js" ></ script >
</ body >
</ html >
|
CSS
body { font-family : Arial , sans-serif ;
background-color : #C0C0C0 ;
margin : 0 ;
padding : 0 ;
display : flex;
flex- direction : column;
align-items: center ;
text-align : center ;
} header { background-color : #800080 ;
color : white ;
padding : 1 rem;
width : 100% ;
} main { display : flex;
align-items: center ;
flex- direction : column;
padding : 2 rem;
} .pin-container { display : flex;
flex-wrap: wrap;
gap: 20px ;
} .pin { width : 150px ;
height : 150px ;
background-color : #3498db ;
color : white ;
display : flex;
flex- direction : column;
justify- content : center ;
align-items: center ;
border-radius: 15px ;
cursor : pointer ;
transition: background-color 0.3 s;
} .pin:hover { background-color : #1e6a9d ;
} |
Output:
Article Tags :