URL Shortener Converter

URL Shortener

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

 <style>
.container {
  background-color: #fff;
  padding: 3px;   
  border-radius: 12px;
  text-align: center;
  width: 100%;
  height:100%;
}
input[type="text"] {
  width:90%;
  padding: 3px;
  margin-bottom: 20px;
  background-color: #f4f4f9;
  border: 1px solid #ddd;
  border-radius: 12px;
  cursor: pointer;
}
button {
    padding: 12px 20px;
    margin: 2px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    background-color:#0066ff;
    color:#fff;
}
#result {
  margin-top:50px;
  border-radius: 8px;
  
  background-color:#000000;
  width:95%;
  height:10%;
  border:1px solid #333;
  color:#fff;
}
</style>
<div class="container">
   
    <input id="urlInput" type="text" />
    <button onclick="shortenUrl()">Shorten URL</button>
<button class="copy-btn" onclick="copyLink()">Copy Link</button>
    <div class="result" id="result" style="display: none;"> 
     
        <p>Shortened URL: <span id="shortenedUrl"></span></p>
      
       
  </div>  
</div>

<script>
   async function shortenUrl(){
        let e = document.getElementById("urlInput"), 
            t = e.value.trim();
        
        if (!t) {
            alert("Please enter a URL.");
            return;
        }

        try {
            // Fetch the shortened URL using TinyURL API
            let r = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(t)}`);
            let n = await r.text();  // Get the shortened URL text

            // Display the shortened URL
            displayShortenedUrl(n);
        } catch (l) {
            console.error(l);
            alert("An error occurred while shortening the URL. Please try again.");
        }
    }

    function displayShortenedUrl(shortenedUrl) {
        let resultDiv = document.getElementById("result");
        let shortenedUrlElement = document.getElementById("shortenedUrl");
        
        // Clear previous shortened URL and display new one
        shortenedUrlElement.innerHTML = shortenedUrl;
        resultDiv.style.display = "block";
    }

    // Function to copy the shortened URL to clipboard
    function copyLink() {
        const shortUrl = document.getElementById('shortenedUrl').textContent;
        
        // Copy to clipboard
        navigator.clipboard.writeText(shortUrl)
            .then(() => {
                alert("URL copied to clipboard!");
            })
            .catch(err => {
                alert("Failed to copy URL: " + err);
            });
    }
</script>