create a copy-to-clipboard widget

How to create a copy-to-clipboard widget using HTML, CSS, and jQuery

Let’s create a copy-to-clipboard widget using HTML, CSS, jQuery. This kind of project can be useful when you are building an HTML website and if there is some piece of content that you want the viewer to copy.

create a copy-to-clipboard widget

Table of Contents

HTML

So let’s start this by building the structure using Html. In this HTML page I’ve linked google font “Montserrat”, and also I’ve linked CDN for font-awesome. Most importantly I’ve linked jQuery 3.6 from google. You can just google search google jQuery and you’ll be able to find this link.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Copy To Clipboard With JQuery</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        
        <div class="container">
            <h1>Copy to Clipboard</h1>
            <textarea id="textField" class="text-field">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui totam quidem architecto, explicabo doloremque pariatur nobis voluptate dicta voluptates molestias sed repellat quas id veritatis eligendi officiis esse. Explicabo, eos.
            </textarea>
            <button class="copy-btn">Copy<i class="fas fa-clone"></i></button>
            <span class="copied">Copied!</span>
        </div>
        
    </body>

    <script src="main.js"></script>
</html>

So, You are done with the HTML, now it is time to style this page using CSS

CSS

Now it is time to style this page using CSS. Using the following CSS codes you’ll be able to change your HTML structure to a widget that has styled elements.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #f3f4f7;
    font-family: 'montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

input, textarea, button {
    font-family: inherit;
}

.container {
    width: 420px;
    height: 530px;
    padding: 25px;
    background-color: #f3f4f7;
    border-radius: 10px;
    box-shadow: 0 0 25px 5px rgba(83, 87, 95, 0.25);
}

h1 {
    padding: 20px 0;
    color: #090909;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.text-field {
    width: 100%;
    height: 230px;
    margin: 20px 0;
    padding: 10px;
    background: transparent;
    border: 1px solid #52565e;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    resize: none;
}

.copy-btn {
    padding: 10px 15px;
    color: #f3f4f7;
    background-color: #037ef3;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    outline: none;
    cursor: pointer;
}

.copy-btn i {
    padding-left: 10px;
}

.copy-btn:active {
    transform: scale(0.98);
}

span.copied {
    display: block;
    margin-top: 50px;
    text-align: center;
    font-size: 26px;
    color: #858585;
    transition: all 0.5s;
}

span.bounce-effect {
    animation: bounceIn 0.8s linear;
}

/* BounceIn Animation */

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    80% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
} 

jQuery

So now it is time to make things work for this widget using the following jQuery code. This jQuery code will allow the content in the text area to be copied when the button is clicked and also an animated Copied text will pop-up

$(document).ready(function () {
    //Make two functions to add and remove the class in the span
    function add() {
        $(".copied").addClass("bounce-effect");
    }

    function remove() {
        $(".copied").removeClass("bounce-effect");
    }

    // Call the functions and copy the text on button click
    $(".copy-btn").click(function () {
        $("#textField").select();
        document.execCommand("copy");
        add();
        setTimeout(remove, 800);
    })
});

So this is how you create a copy-to-clipboard widget using HTML, CSS, and jQuery. Now you have your own copy-to-clipboard widget. You can customize it however you want and add it to your website or any of your projects.

Hope this post helped you. If it did, please share this post on social media!

You may also like to read: How to create and deploy a website on GitHub pages for free

(Visited 23 times, 1 visits today)

Leave a Reply