URL Shortener Tool with colorful styling and all its features use any free library...

 

URL Shortener

body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #f0f4c3, #81c784); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; width: 90%; max-width: 400px; } h1 { color: #388e3c; margin-bottom: 20px; } input { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #388e3c; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #66bb6a; } .result { margin-top: 20px; display: none; } #shortenedUrl { color: #1976d2; font-weight: bold; } document.getElementById('shortenBtn').addEventListener('click', async () => { const urlInput = document.getElementById('urlInput').value; const resultContainer = document.getElementById('resultContainer'); const shortenedUrl = document.getElementById('shortenedUrl'); // Basic URL validation if (!urlInput) { alert('Please enter a URL'); return; } // Simulating URL shortening with a placeholder // Replace this part with a real API call to shorten URLs try { const mockShortenedUrl = `https://short.url/${btoa(urlInput).slice(0, 5)}`; shortenedUrl.innerText = mockShortenedUrl; resultContainer.style.display = 'block'; } catch (error) { console.error('Error shortening URL:', error); alert('Error shortening URL. Please try again.'); } });