Making Copy Text button

Creating functional copy text button in html CSS and JavaScript which copy the text form input field and paste the text any other document file it like just working copy and cut button.

Basic steps of creating copy text button I overview to copy text button II open VS code and creating files III creating basic structure of copy text button in html IV style the html document with CSS V Add JavaScript for functionality VI Get final output of creating copy text button

HTML code

<div class="container">

        <div class="pro">

            <h1>Creating Text copy button</h1>

            <div class="inbtn">

                <input type="text" placeholder="text copy" value="" id="myInput">

                <button onclick="myFunction()">Copy</button>

            </div>

        </div>

    </div>

CSS code

.container {

    font-family: sans-serif;

    font-weight: bold;

    font-size: 14px;

    text-align: center;

    padding: 20px;

    margin: 10px 350px;

    box-shadow: 0 0 30px 0 rgb(172, 33, 33);

    background-color: rgb(4, 161, 140);

    color: white;

}

.pro {

    padding: 10px;

    margin: 5px;

    border: 1px solid red;

    border-radius: 10px;

    box-shadow: 0 0 30px 0;

}

.container:hover {

    transform: scale(1.1);

}

.inbtn {

    padding: 6px;

    margin: 3px;

    box-shadow: 0 0 30px 0;

    background: rgb(5, 138, 148);

    border-radius: 20px;

}

.container input {

    padding: 8px;

    border: none;

    font-family: sans-serif;

    font-size: 16px;

    border-radius: 10px 0 0 10px;

}

.container button {

    padding: 10px;

    border: none;

    color: white;

    border-radius: 0 10px 10px 0;

    background-color: rgb(4, 75, 4);

    margin-left: -4px;

}

JavaScript code

<script>

        function myFunction() {

            // get the text field

            var copyText = document.getElementById("myInput")

            copyText.setSelectionRange(0, 99999);

            // copy text inside the text field

            navigator.clipboard.writeText(copyText.value);

            // alert the copy text

            alert("copied the text: " + copyText.value)

        }

    </script>

Watch the video for more details