Implementing Copy to Clipboard Functionality using HTML CSS and JS

Copy to Clipboard functionality has become a staple in modern web development, offering users a convenient way to quickly copy text or links with just a click. In this comprehensive guide, we'll delve into the art of implementing the 'Copy to Clipboard' feature using a combination of JavaScript and CSS.

Also Read: Custom Volume Slider using HTML CSS and JS

Whether you're a seasoned developer looking to enhance your projects or a newcomer eager to learn, this step-by-step tutorial will walk you through the process. Let's embark on this journey to empower your web development skills and provide your users with an intuitive way to copy information effortlessly.

HTML Structure

To kick off our implementation of the 'Copy to Clipboard' feature, let's begin with the HTML structure. This is the backbone that sets the stage for our functionality. Below is the HTML code that comprises our simple yet effective setup.

<div class="main-container">
    <div class="wrapper">
        <div class="link-container">https://www.smartinfogl.com</div>
        <button class="copy-btn" onclick="copyToClipboard()">Copy</button>
    </div>
</div>

The outermost container (main-container) helps us center our content on the page. Inside, the wrapper div holds the link and the copy button together. The link-container div represents the area that displays the link we want to copy. The copy-btn button triggers the copy functionality when clicked.

CSS Styling

Now, let's bring life to our HTML structure by applying some CSS styles. This not only makes our elements visually appealing but also ensures a pleasant user experience. Below is the CSS code tailored for our structure.

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css');

.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 400px;
}

.wrapper {
    font-family: 'calibri';
    color: #ffffff;
    display: flex;
    gap: 10px;
}

.link-container {
    padding: 8px 18px 8px 40px;
    border: 1px solid wheat;
    border-radius: 35px;
    color: #c9c9c9;
    font-size: 15px;
    align-items: center;
    position: relative;
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-container::before {
    content: '\f470';
    position: absolute;
    top: 55%;
    left: 22px;
    font-family: "bootstrap-icons", bootstrap-icons;
    font-size: 1.2rem;
    color: white;
    transform: translate(-50%, -50%);
}

.link-container.copied::before {
    content: "\f26f";
    color: #81ec90;
}

.copy-btn {
    font-size: 16px;
    color: white;
    background: #1b3962;
    border: none;
    padding: 5px 15px;
    width: 95px;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
}

Sets up the main container to center its content. Styles the wrapper and link-container, giving them a clean and user-friendly appearance. Utilizes the bootstrap-icons library to add an icon before the link in the link-container. Enhances the copy button with a distinct appearance and behavior when clicked.

JavaScript Functionality

To make our 'Copy to Clipboard' button functional, we need to add some JavaScript. Below is the code for handling the clipboard functionality and providing feedback to the user.

const copyBtn = document.querySelector('.copy-btn');
const linkContainer = document.querySelector('.link-container');

function copyToClipboard() {
    navigator.clipboard.writeText(linkContainer.innerText);
    
    copyBtn.innerText = 'Copied!';
    linkContainer.classList.add('copied');

    setTimeout(() => {
        linkContainer.classList.remove('copied');
        copyBtn.innerText = 'Copy';
    }, 1000);
}

copyBtn.addEventListener('click', copyToClipboard);

• Retrieves the 'Copy' button and link container elements from the HTML.
• Defines a copyToClipboard function that uses the navigator.clipboard.writeText method to copy the text content of the link container to the clipboard.
• Updates the button text and adds a 'copied' class to the link container to provide visual feedback.
• Resets the text and styles after a short delay to give a smooth user experience.

Now, with the addition of this JavaScript code, our 'Copy to Clipboard' feature is fully functional. Users can click the button to copy the link, and they will receive visual confirmation of the successful copy operation.

Throughout the tutorial, we focused on creating a user-friendly and aesthetically pleasing 'Copy to Clipboard' feature. This feature is a valuable addition to websites where sharing links or information is a common user interaction.

Also Read: Fingerprint Scanning Animation using HTML and CSS only

By following this step-by-step guide, readers should have gained insights into integrating clipboard functionality seamlessly into their web projects. This practical example illustrates how combining HTML, CSS, and JavaScript can result in a functional and visually appealing feature that improves user interaction on a website.

Download