Two years ago, I added a copy function to the site, which took me half a day of tinkering. Ultimately, the rendering effect wasn’t quite satisfactory, and as a somewhat mediocre frontend developer, I didn’t plan on improving it – if it worked, it was good enough. This year, I used AI to develop a mini-program, which has also made me more familiar with frontend development. I refactored it (the AI redesigned it).

Realization: Breaking down tasks really helps; many small tasks are quite natural for the AI to develop. For the closed mini-program, 75% of the code was provided by AI, broken down into multiple tasks delivered, and manually assembled the project code.

Previous Context

Making simple things easier: Adding a code copy button

Main Text

promot: Design CSS and JavaScript code to locate webpage elements with the class “highlight”, and within their container, add a copy button to enable copying of the content.

The first draft of the code was immediately problematic; I generated a revised version that is largely functional, but the copied content is incorrect, containing redundant text. Further guidance led to optimization, specifying core color design and effects.

Having learned your specific requirements for button size and color, we redesigned the button styles to accommodate these demands. Here’s the adjusted CSS style sheet, incorporating your provided color scheme and optimizing the button size:

.copy-btn {
  position: absolute;
  top: 2px; /* Adjust position */
  right: 2px;
  padding: 3px 6px; /* Reduce size */
  font-size: 12px; /* Decrease font size */
  background-color: #8FD1E1; /* Button background color */
  color: #272822; /* Text color */
  border: 1px solid #272822; /* Border color */
  border-radius: 3px; /* Rounded corners */
  cursor: pointer;
  opacity: 0.7; /* Default semi-transparent */
  transition: opacity 0.3s ease, background-color 0.3s ease; /* Smooth transition effect */
}

.copy-btn:hover {
  opacity: 1; /* Unhide on hover */
  background-color: #A3D4E5; /* Background color on hover */
}

.highlight {
  position: relative;
}

In this style sheet, I reduced the button’s size and font size to create a more refined look. The button’s default state is semi-transparent, becoming fully opaque when hovered over, with a slightly brighter background color for visual feedback. This design meets your color requirements while maintaining modern and user-friendly characteristics.

Here’s a simpler JavaScript implementation:

document.addEventListener('DOMContentLoaded', function() {
  // Find all .highlight elements
  const highlights = document.querySelectorAll('.highlight');

  highlights.forEach(function(highlight) {
    // Create copy button
    const copyBtn = document.createElement('button');
    copyBtn.textContent = 'Copy';
    copyBtn.classList.add('copy-btn');

    // Add the button to each .highlight element
    highlight.appendChild(copyBtn);

    // Add click event listener
    copyBtn.addEventListener('click', function() {
      // Assume the first <code> element within .highlight contains the code to copy
      const code = highlight.querySelector('code') ? highlight.querySelector('code').textContent : '';

      navigator.clipboard.writeText(code).then(() => {
        // Display success message
        copyBtn.textContent = 'Copied!';
        setTimeout(() => {
          copyBtn.textContent = 'Copy';
        }, 2000);
      }).catch(err => {
        console.error('Copy failed: ', err);
      });
    });
  });
});

Epilogue

While I had hoped to see a copy button added in the top-right corner of the code area, due to my lack of familiarity with frontend development, I was unable to accurately describe the functionality based on keywords and spent several rounds iterating with AI without achieving the desired results.

It remains to be seen what impact AI will have on software development as time goes on.