Javascript Paste from Clipboard

<!DOCTYPE html>
<html>
<head>
    <title>Copy to Clipboard</title>
</head>
<body>
    <div class="container">
        <h2>Javascript Copy to Clipboard</h2>
        <div class="input-group">
            <label for="copy-text">Text to be copied:</label>
            <input id="copy-text" type="text" value="Text to be copied" />
            <button id="copy-button">Copy to Clipboard</button>
        </div>
        <pre id="result">Text Copied</pre>
    </div>

h2 {
            text-align: center;
            margin-bottom: 20px;
        }

.input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

label {
            font-size: 16px;
            margin-bottom: 10px;
        }

input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 15px;
        }

button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

button:hover {
            background-color: #0056b3;
        }

pre {
            display: none;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
            overflow-x: auto;
            font-size: 14px;
            white-space: pre-wrap;
            word-break: break-all;
        }
    </style>
</body>

</html>