Syntax Highlighting with Copy Button 


<!DOCTYPE html>

<html>

<head>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f0f0f0;

      margin: 0;

      padding: 0;

    }

    .container {

      max-width: 600px;

      margin: 0 auto;

      padding: 20px;

      background-color: #ffffff;

      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

      border-radius: 5px;

    }

    h1 {

      text-align: center;

    }

    .shorten-url-container {

      display: flex;

      flex-direction: column;

      align-items: center;

      margin: 10px 0;

    }

    .shorten-url-container input[type="text"],

    .shorten-url-container button {

      padding: 10px;

      font-size: 16px;

      border: 1px solid #ccc;

      border-radius: 5px;

      margin: 5px;

    }

    .shorten-url-container input[type="text"] {

      flex: 1;

    }

    .shorten-url-container button {

      background-color: #4CAF50;

      color: white;

      cursor: pointer;

      border: none;

    }

    .shorten-url-container button:hover {

      background-color: #45a049;

    }

    .short-url {

      margin-top: 20px;

      font-size: 16px;

      word-break: break-all;

      background-color: #f5f5f5;

      padding: 10px;

      border-radius: 5px;

      text-align: center;

    }

    .copy-button {

      background-color: #008CBA;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>URL Shortener</h1>

    <div class="shorten-url-container">

      <input type="text" id="urlinput" placeholder="Enter URL here">

      <button id="urlbutton" onclick="shortenUrl()">Shorten URL</button>

      <input type="text" id="urloutput" placeholder="Short URL will appear here" readonly />

      <button class="copy-button" onclick="copyShortUrl()">Copy Short URL</button>

    </div>

    <div class="short-url" id="urloutput"></div>

  </div>

  <script>

    function shortenUrl() {

      const longUrl = document.getElementById('urlinput').value;

      const apiKey = 'd3025ebe64c749d29651624eb4af2ad6'; // Add your Rebrandly API Key here

      const apiEndpoint = 'https://api.rebrandly.com/v1/links';

      const requestHeaders = {

        'Content-Type': 'application/json',

        'apikey': apiKey,

      };

      const requestData = {

        destination: longUrl,

      };

      fetch(apiEndpoint, {

        method: 'POST',

        headers: requestHeaders,

        body: JSON.stringify(requestData)

      })

      .then(response => response.json())

      .then(data => {

        if (data && data.shortUrl) {

          document.getElementById('urloutput').value = data.shortUrl;

        } else {

          alert('Error: Unable to shorten URL.');

        }

      })

      .catch(error => {

        alert('Error: ' + error.message);

      });

    }

    function copyShortUrl() {

      const shortUrl = document.getElementById('urloutput').value;

      const textarea = document.createElement('textarea');

      textarea.value = shortUrl;

      document.body.appendChild(textarea);

      textarea.select();

      document.execCommand('copy');

      document.body.removeChild(textarea);

      alert('Short URL copied to clipboard!');

    }

  </script>

</body>

</html>