Untitled

<html>
  <head>
    <style>
      html {
        font-size: 2rem;
      }
      input, textarea, button {
        font-family: inherit;
      }
      input, textarea {
        width: 100%;
      }
      [type=text], button {
        font-size: inherit;
        height: 3rem;
        margin: 1.5rem 0;
      }
      [type=range] {
        appearance: none;
        background-color: #bbb;
        height: 1rem;

        &::-webkit-slider-thumb {
          appearance: none;
          height: 2rem;
          width: 2rem;
          background-color: white;
          border: 1px solid #333;
          border-radius: 50%;
        }
      }
      textarea {
        font-size: 32px;
      }
    </style>
  </head>
  <body>
    <input type="text" id="inputText" placeholder="Enter your text...">
    <div>
      <input type="range" id="fontSizeSlider" min="8" max="200" value="32">
      <label for="fontSizeSlider" id="fontSizeLabel">32px</label>
      <button id="copyText" disabled>Copy Text</button>
      <button id="clearText">Clear</button>
    </div>
    <textarea id="outputText" rows="10" cols="50" placeholder="Generated text will appear here..." readonly></textarea>

    <script>
      const inputText = document.getElementById('inputText');
      const slider = document.getElementById('fontSizeSlider');
      const fontSizeLabel = document.getElementById('fontSizeLabel');
      const copyText = document.getElementById('copyText')
      const outputText = document.getElementById('outputText');
      const defaultFontSize = 32;

      // Generate text based on user input and slider change
      function generateText() {
        fontSizeLabel.textContent = slider.value + 'px';
        outputText.style.fontSize = slider.value + 'px';
        outputText.value = inputText.value;
        copyText.disabled = inputText.value.length === 0;
      }

      // Event listeners for input and slider changes
      document.querySelectorAll('#inputText, #fontSizeSlider').forEach(
        input => {
          input.addEventListener('input', generateText);
        }
      );

      // Copy generated text to clipboard
      copyText.addEventListener('click', () => {
        outputText.select();
        document.execCommand('copy');
      });

      // Clear input and output fields
      document.getElementById('clearText').addEventListener('click', () => {
        inputText.value = '';
        outputText.value = '';
        outputText.style.fontSize = defaultFontSize + 'px';
        slider.value = defaultFontSize;
        fontSizeLabel.textContent = defaultFontSize + 'px';
        copyText.disabled = true;
      });
    </script>
  </body>
</html>