Adding a Copy to clipboard Button to Your Web App: HTML, CSS & JavaScript

By /
Adding a "Copy Results" Button to Your Web App: HTML, CSS & JavaScript

Hey team! I wanted to share a quick walkthrough of how we implemented the “Copy to Clipboard” button that can be easily added and customized into various web applications. This feature allows users to easily share textual data or links with others.

Why “Copy Results”?

We wanted to provide a simple way for users to share their achievements on social media, in messages, or anywhere else they like. Instead of dealing with complex social media APIs, we opted for a straightforward solution: “Copy Results.” This button copies the game result text to the user’s clipboard, enabling them to paste it wherever they want.

Implementation

Here’s a breakdown of how we did it:

1. HTML Structure

First, we added a button to our modal window that appears after the game is completed.

HTML

<button id="copyResultsButton">Copy your result to the clipboard and send it to your friend!</button>
  • id="copyResultsButton": This is the button’s unique identifier, which we’ll use in our JavaScript.
  • “Copy your result to the clipboard and send it to your friend!”: This is the text displayed on the button.

2. JavaScript Logic

Next, we added the JavaScript code that handles the button click and copies the result to the clipboard.

JavaScript

const copyResultsButton = document.getElementById('copyResultsButton');

if (copyResultsButton) {
    copyResultsButton.addEventListener('click', () => {
        const time = document.getElementById('final-time').innerText;
        const moves = document.getElementById('final-moves').innerText;
        const gameUrl = window.location.href; // Get the current page URL

        const results = `I solved the game in ${time} seconds in ${moves} moves! I chalenge you to try the game yourself: ${gameUrl}`;

        navigator.clipboard.writeText(results)
            .then(() => {
                alert('Results copied to clipboard!');
            })
            .catch(err => {
                console.error('Could not copy text: ', err);
                alert('Failed to copy results. Please try again.');
            });
    });
}
  • const copyResultsButton = document.getElementById('copyResultsButton');: Here, we get a reference to the button using its ID.
  • if (copyResultsButton): We check if the button exists before adding the event listener. This is good practice to prevent errors if the button isn’t found.
  • copyResultsButton.addEventListener('click', () => { ... });: We add a click event listener to the button. When the user clicks the button, the function inside addEventListener is executed.
  • const time = document.getElementById('final-time').innerText;: We get the game time from the modal window.
  • const moves = document.getElementById('final-moves').innerText;: We get the number of moves from the modal window.
  • const gameUrl = window.location.href;: We get the current page URL. This allows users to share a link to the game.
  • const results = ...: We create the text that will be copied to the clipboard. This text includes the time, number of moves, and a link to the game.
    • Translation of results string: “I solved the Pepco memory game in ${time} seconds with ${moves} moves! I challenge you to try the game here: ${gameUrl}”
  • navigator.clipboard.writeText(results): This is the key line of code that copies the text to the clipboard.
  • .then(() => { ... }): If the copy operation is successful, we display an alert to the user.
  • .catch(err => { ... }): If the copy operation fails, we log the error to the console and display an error message to the user.

3. CSS

Here is some styles for the copy button to make it nice and orange:

#copyResultsButton {
    display: block; /* Make it a block element for full width */
    width: 100%; /* Take full width of the parent */
    margin-top: 20px; /* Add some space above the button */
    padding: 15px 20px; /* Adjust padding for size */
    background: #ff8800; /* Match difficulty button background */
    color: #ffffff; /* Match difficulty button text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Slightly rounded corners */
    font-size: 1.2rem; /* Adjust font size as needed */
    cursor: pointer; /* Indicate it's clickable */
    text-align: center; /* Center the text */
    box-shadow: inset 0 -5px 7px -5px rgba(0, 0, 0, 0.7); /* Match difficulty button shadow */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

#copyResultsButton:hover {
    background: #ff9933; /* Slightly lighter on hover */
}

#copyResultsButton:active {
    box-shadow: inset 0 5px 7px -5px rgba(0, 0, 0, 0.7); /* Invert the shadow on click */
}

Key Takeaways:

  • The navigator.clipboard.writeText() API is a simple and effective way to copy text to the clipboard.
  • Always include error handling to provide a better user experience.
  • Consider adding user feedback to confirm the copy operation.

This simple addition significantly improves the user experience by making it easy to share game results. I hope this helps!

Related Posts

Scroll to Top