Create a Quick access Pin using HTML , CSS and JavaScript
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' , url: 'https://www.w3wiki.net' , icon: '????' }, { 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:
Contact Us