Summary  
This chapter demonstrates how to attach click event handlers to DOM elements, use the Clipboard API to copy text programmatically, and update the UI by modifying element content and styles for interactive feedback.

General domain of usage  
Front-end web development

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .section {
        display: flex;
        justify-content: flex-start;
        margin: 20px 0;
        min-height: 120px;
      }

      .circle-container {
        display: flex;
        flex-direction: column;
        width: 100px;
        align-items: center;
        cursor: pointer;
      }

      .circle {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        display: block;
        border: 1px solid black;
      }

      .circle-container p {
        margin-top: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h3>Click on the color that you need to use</h3>
    <div class="section">
      <div class="circle-container" onclick="copyColor('#080808', this)">
        <span class="circle" style="background-color: #080808"></span>
        <p>#080808</p>
      </div>
    </div>

    <div class="section">
      <div class="circle-container" onclick="copyColor('#FFFFFF', this)">
        <span class="circle" style="background-color: #ffffff"></span>
        <p>#FFFFFF</p>
      </div>
      <div class="circle-container" onclick="copyColor('#FFFFFF 50%', this)">
        <span
          class="circle"
          style="background-color: rgba(255, 255, 255, 0.5)"
        ></span>
        <p>#FFFFFF 50%</p>
      </div>
      <div class="circle-container" onclick="copyColor('#F4F4F4', this)">
        <span class="circle" style="background-color: #f4f4f4"></span>
        <p>#F4F4F4</p>
      </div>
      <div class="circle-container" onclick="copyColor('#DFDFDF', this)">
        <span class="circle" style="background-color: #dfdfdf"></span>
        <p>#DFDFDF</p>
      </div>
      <div class="circle-container" onclick="copyColor('#B8B8B8', this)">
        <span class="circle" style="background-color: #b8b8b8"></span>
        <p>#B8B8B8</p>
      </div>
      <div class="circle-container" onclick="copyColor('#6E6E6E', this)">
        <span class="circle" style="background-color: #6e6e6e"></span>
        <p>#6E6E6E</p>
      </div>
      <div class="circle-container" onclick="copyColor('#383A3E', this)">
        <span class="circle" style="background-color: #383a3e"></span>
        <p>#383A3E</p>
      </div>
    </div>

    <div class="section">
      <div class="circle-container" onclick="copyColor('#FF8A00', this)">
        <span class="circle" style="background-color: #ff8a00"></span>
        <p>#FF8A00</p>
      </div>
      <div class="circle-container" onclick="copyColor('#FF8A00 50%', this)">
        <span
          class="circle"
          style="background-color: rgba(255, 138, 0, 0.5)"
        ></span>
        <p>#FF8A00 50%</p>
      </div>
      <div class="circle-container" onclick="copyColor('#FFA63D', this)">
        <span class="circle" style="background-color: #ffa63d"></span>
        <p>#FFA63D</p>
      </div>
      <div class="circle-container" onclick="copyColor('#FF951A', this)">
        <span class="circle" style="background-color: #ff951a"></span>
        <p>#FF951A</p>
      </div>
      <div class="circle-container" onclick="copyColor('#E57C00', this)">
        <span class="circle" style="background-color: #e57c00"></span>
        <p>#E57C00</p>
      </div>
    </div>

    <div class="section">
      <div class="circle-container" onclick="copyColor('#273246', this)">
        <span class="circle" style="background-color: #273246"></span>
        <p>#273246</p>
      </div>
      <div class="circle-container" onclick="copyColor('#273246 50%', this)">
        <span
          class="circle"
          style="background-color: rgba(39, 50, 70, 0.5)"
        ></span>
        <p>#273246 50%</p>
      </div>
      <div class="circle-container" onclick="copyColor('#4F5E77', this)">
        <span class="circle" style="background-color: #4f5e77"></span>
        <p>#4F5E77</p>
      </div>
      <div class="circle-container" onclick="copyColor('#36445C', this)">
        <span class="circle" style="background-color: #36445c"></span>
        <p>#36445C</p>
      </div>
      <div class="circle-container" onclick="copyColor('#1E2635', this)">
        <span class="circle" style="background-color: #1e2635"></span>
        <p>#1E2635</p>
      </div>
    </div>

    <div class="section">
      <div class="circle-container" onclick="copyColor('#9BBAEE', this)">
        <span class="circle" style="background-color: #9bbaee"></span>
        <p>#9BBAEE</p>
      </div>
      <div class="circle-container" onclick="copyColor('#45608D', this)">
        <span class="circle" style="background-color: #45608d"></span>
        <p>#45608D</p>
      </div>
      <div class="circle-container" onclick="copyColor('#4E6793', this)">
        <span class="circle" style="background-color: #4e6793"></span>
        <p>#4E6793</p>
      </div>
      <div class="circle-container" onclick="copyColor('#F5F8FD', this)">
        <span class="circle" style="background-color: #f5f8fd"></span>
        <p>#F5F8FD</p>
      </div>
    </div>

    <div class="section">
      <div class="circle-container" onclick="copyColor('#05C38A', this)">
        <span class="circle" style="background-color: #05c38a"></span>
        <p>#05C38A</p>
      </div>
      <div class="circle-container" onclick="copyColor('#51DE9A', this)">
        <span class="circle" style="background-color: #51de9a"></span>
        <p>#51DE9A</p>
      </div>
      <div class="circle-container" onclick="copyColor('#098F67', this)">
        <span class="circle" style="background-color: #098f67"></span>
        <p>#098F67</p>
      </div>
    </div>

    <div class="section">
      <div class="circle-container" onclick="copyColor('#FA4848', this)">
        <span class="circle" style="background-color: #fa4848"></span>
        <p>#FA4848</p>
      </div>
      <div class="circle-container" onclick="copyColor('#B50707', this)">
        <span class="circle" style="background-color: #b50707"></span>
        <p>#B50707</p>
      </div>
      <div class="circle-container" onclick="copyColor('#FF6F6F', this)">
        <span class="circle" style="background-color: #ff6f6f"></span>
        <p>#FF6F6F</p>
      </div>
      <div class="circle-container" onclick="copyColor('#FF8080', this)">
        <span class="circle" style="background-color: #ff8080"></span>
        <p>#FF8080</p>
      </div>
      <div class="circle-container" onclick="copyColor('#FFACAC', this)">
        <span class="circle" style="background-color: #ffacac"></span>
        <p>#FFACAC</p>
      </div>
    </div>

    <div class="section">
      <div class="circle-container" onclick="copyColor('#FFD600', this)">
        <span class="circle" style="background-color: #ffd600"></span>
        <p>#FFD600</p>
      </div>
    </div>

    <script>
      function copyColor(color, button) {
        navigator.clipboard
          .writeText(color)
          .then(() => {
            // Change the text inside the <p> to "Copied!"
            const originalText = button.querySelector("p").textContent;
            button.querySelector("p").textContent = "Copied!";

            // Change the text back to the original after 1 second
            setTimeout(() => {
              button.querySelector("p").textContent = originalText;
            }, 1000);

            console.log("Copied to clipboard!");
          })
          .catch((err) => {
            console.error("Failed to copy: ", err);
          });
      }
    </script>
  </body>
</html>


This section contains a variety of buttons, each designed to perform a specific function.

This section provides auxiliary tools that support content formatting and data manipulation.

This section contains additional features and tools designed to provide enhanced functionality.

This section contains various text box elements.

Please don't use any elements from this section, as it doesn't provide any value for the content development. Thank you!

Please note that the elements in this section are deprecated and no longer recommended for use. It would be best to avoid using them moving forward. Thank you!

Colors

Awesome!

Colors