Two years ago, I added a copy function for the site’s code area. It took nearly half a day, and the final rendering effect was not ideal. As an amateur front-end developer, I didn’t bother to improve it; as long as it worked, that was fine. This year, using INLIN_ITALIC_1__, I developed a mini program and became more familiar with front-end development. So, I rebuilt it (AI redesign).

Understanding the Dao: Break down tasks into many smaller ones

Previous text

Please provide the Chinese text you want me to translate. I am ready when you are! Just paste the text here.

Main body

Design CSS and JavaScript code to locate webpage elements with the class “highlight”. Within the container of these elements, add a copy button that implements the functionality to copy the code.

The initial draft of the code had issues. A revised draft was generated, which is now basically functional, but contains incorrect copied content and redundant text. Further optimization is needed, including manual specification of core color design and effects.

We understand you have specific requirements for button size and color. We can redesign the button style to accommodate these needs. Here’s an adjusted CSS style, incorporating your provided color scheme and optimizing the button dimensions:

.copy-btn {
  position: absolute;
  top: 2px; /* 调整位置 */
  right: 2px;
  padding: 3px 6px; /* 缩小尺寸 */
  font-size: 12px; /* 减小字体大小 */
  background-color: #8FD1E1; /* 按钮背景色 */
  color: #272822; /* 文字颜色 */
  border: 1px solid #272822; /* 边框颜色 */
  border-radius: 3px; /* 圆角 */
  cursor: pointer;
  opacity: 0.7; /* 默认半透明 */
  transition: opacity 0.3s ease, background-color 0.3s ease; /* 平滑过渡效果 */
}

.copy-btn:hover {
  opacity: 1; /* 鼠标悬停时不透明 */
  background-color: #A3D4E5; /* 鼠标悬停时的背景色 */
}

.highlight {
  position: relative;
}

In this style, I’ve reduced the button size and font to make it more refined. The default state is semi-transparent; hovering over the button makes it opaque with a slightly brighter background for visual feedback. This design meets your color requirements while maintaining a modern, user-friendly feel.

A simpler version was provided accordingly

document.addEventListener('DOMContentLoaded', function() {
  // 查找所有 .highlight 元素
  const highlights = document.querySelectorAll('.highlight');

  highlights.forEach(function(highlight) {
    // 创建复制按钮
    const copyBtn = document.createElement('button');
    copyBtn.textContent = '复制';
    copyBtn.classList.add('copy-btn');

    // 将按钮添加到每个 .highlight 元素中
    highlight.appendChild(copyBtn);

    // 添加点击事件监听器
    copyBtn.addEventListener('click', function() {
      // 假设 .highlight 下的第一个 <code> 元素包含要复制的代码
      const code = highlight.querySelector('code') ? highlight.querySelector('code').textContent : '';

      navigator.clipboard.writeText(code).then(() => {
        // 显示复制成功信息
        copyBtn.textContent = '已复制!';
        setTimeout(() => {
          copyBtn.textContent = '复制';
        }, 2000);
      }).catch(err => {
        console.error('复制失败: ', err);
      });
    });
  });
});

Afterword

Although I’d prefer a copy button added to the top right of the code area, due to my limited frontend knowledge, I haven’t been able to accurately describe the functionality with keywords, and several attempts have not yielded the desired result

It’s uncertain what impact AI will have on program development as time progresses