Feature Coming Soon!
The newsletter functionality is under development.
This project demonstrates a simple "Copy and Move" text utility using HTML, CSS, and JavaScript. It provides two text areas: a source text area from which content can be copied, and a destination text area where the copied content can be moved. The utility features two buttons: one to copy the text from the source to the clipboard, and another to move (copy and paste) the text from the source to the destination text area.
The design uses a vibrant `blueviolet` background with a clean and organized layout for the text areas and buttons. The core functionality relies on JavaScript to interact with the DOM, handle button click events, and manage clipboard operations. CSS is used to style the interface, ensuring it is visually appealing and responsive. This project is an excellent example of combining HTML structure, CSS styling, and JavaScript for practical text manipulation utilities.
The HTML structure for this text utility is straightforward. It is contained within a `main` element with the class `text-manipulator`. Inside, there are two `section` elements: `copy-section` and `move-section`. The `copy-section` contains a `div` with a `copyButton` and a `textarea` with `id="sourceText"` pre-filled with "Hello World". The `move-section` contains a `div` for `outputPreview`, a `moveButton`, and another `textarea` with `id="destinationText"`. All interactive elements have `aria-label` for accessibility. A `script` tag links to an external JavaScript file (`app.js`) to handle the copy and move logic. This structure provides a clear and accessible interface for text manipulation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Copy & Move Utility</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="text-manipulator">
<section class="copy-section">
<div class="button-group">
<button id="copyButton" class="action-btn copy-btn">Copy Text</button>
</div>
<textarea
id="sourceText"
class="text-area source-text"
cols="50"
rows="3"
aria-label="Source text to copy"
>Hello World</textarea>
</section>
<section class="move-section">
<div id="outputPreview" class="output-preview"></div>
<button id="moveButton" class="action-btn move-btn">Move Text</button>
<textarea
id="destinationText"
class="text-area destination-text"
cols="50"
rows="3"
aria-label="Destination for moved text"
></textarea>
</section>
</main>
<script src="app.js"></script>
</body>
</html>
The CSS for this project provides a clean and responsive layout for the text copy and move utility. The `body` is styled to take up the full viewport height with a `blueviolet` background, and uses CSS Grid to divide the layout into two columns. Common styles are applied to `.container` (likely a typo for `.text-manipulator` or sections within it) to center content. Buttons (`.btn` or `button`) are styled with a dark background, white text, and a `cursor: pointer`. Textareas are given margins and an `outline: none`. A key part of the styling is the `.output-container` which is used for displaying messages, and the `.added` class which provides a temporary visual feedback for copied content, including `position: absolute`, `background`, `color`, and `width` for a floating message. Transitions are used for smooth visual effects.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: blueviolet;
font-family: sans-serif;
display: grid;
grid-template-columns: 2fr 2fr;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-right: 2px solid white;
}
.btns-container {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
textarea {
margin: 10px;
outline: none;
}
.output-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transition: 1s all ease;
}
button {
background-color: rgb(6, 2, 15);
border: none;
color: #fff;
font-weight: bold;
}
/* JavaScript */
.added {
position: absolute;
bottom: 35px;
right: 20px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #000;
color: white;
width: 200px;
height: 50px;
}
The JavaScript for this project implements the core "copy and move" functionality. It selects the source textarea (`copyText`), the destination textarea (`finalText`), the "Move" button (`moveBtn`), the "Copy" button (`copyBtn`), and an `output` element for messages. An event listener is attached to the `copyBtn`: when clicked, it gets the value from `copyText` and calls `copyToClipBoard`. An event listener is also attached to `moveBtn`: when clicked, it gets the value from `copyText` and assigns it to `finalText.value`. Additionally, click listeners are added to both text areas to automatically select their content when clicked. The `copyToClipBoard` function dynamically creates a temporary `textarea`, copies the `str` to it, uses `document.execCommand("copy")` for clipboard interaction, removes the temporary textarea, and then displays a "Content Copied" message in the `output` element with a temporary class (`added`) for a visual effect, which is removed after 2 seconds.
const copyText = document.querySelector("textarea[name=copyTxt");
const finalText = document.querySelector("textarea[name=finalTxt");
const moveBtn = document.querySelector(".moverBtn");
const copyBtn = document.querySelector(".copyBtn");
const output = document.querySelector(".output");
copyBtn.addEventListener("click", () => {
let temp = copyText.value;
copyToClipBoard(temp);
});
moveBtn.addEventListener("click", () => {
let temp = copyText.value;
finalText.value = temp;
});
copyText.addEventListener("click", () => this.select());
finalText.addEventListener("click", () => this.select());
function copyToClipBoard(str) {
const outputContainer = document.querySelector(".output-container");
const textarea = document.createElement("textarea");
textarea.value = str;
outputContainer.appendChild(textarea);
textarea.select();
document.execCommand("copy");
outputContainer.removeChild(textarea);
output.innerHTML = `Content Copied
`;
output.classList.add("added");
setTimeout(() => {
output.classList.toggle("added");
output.textContent = "";
}, 2000);
}
Watch a live demonstration of the Copy and Move Utility below.
This "Copy and Move" text utility provides a practical and interactive example of client-side text manipulation using HTML, CSS, and JavaScript. It demonstrates how to handle user input, interact with the clipboard, and dynamically update the DOM to provide visual feedback. This project is a useful starting point for anyone looking to build more complex text editing tools or enhance user interaction on their web applications.
You can easily customize this component by:
While `document.execCommand('copy')` is used here for clipboard operations, modern web development often prefers `navigator.clipboard.writeText()` for more robust and promise-based clipboard interactions. However, `document.execCommand('copy')` remains a widely supported fallback, especially in environments with stricter security policies or older browser versions.
Click the button below to download the full source code. Download will be ready in 10 seconds.
Receive coding tips and resources updates. No spam.
We respect your privacy. Unsubscribe at any time.