URL Shortener Tool
URL Shortener Tool
Shortened URL:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
margin: 0;
}
.container {
text-align: center;
background: #fff;
padding: 2em;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #4CAF50;
margin-bottom: 1em;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="url"] {
padding: 0.5em;
width: 80%;
max-width: 400px;
border: 2px solid #4CAF50;
border-radius: 5px;
margin-bottom: 1em;
font-size: 1em;
}
button {
padding: 0.5em 1em;
background: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
}
button:hover {
background: #45a049;
}
#result {
margin-top: 1em;
}
#result.hidden,
#error.hidden {
display: none;
}
#error {
color: red;
margin-top: 1em;
}
#copyButton {
margin-top: 0.5em;
}
document.getElementById('urlForm').addEventListener('submit', function(e) {
e.preventDefault();
const longUrl = document.getElementById('longUrl').value;
const resultDiv = document.getElementById('result');
const shortUrlAnchor = document.getElementById('shortUrl');
const errorDiv = document.getElementById('error');
fetch(`https://api.shrtco.de/v2/shorten?url=${longUrl}`)
.then(response => response.json())
.then(data => {
if (data.ok) {
const shortUrl = data.result.full_short_link;
shortUrlAnchor.href = shortUrl;
shortUrlAnchor.textContent = shortUrl;
resultDiv.classList.remove('hidden');
errorDiv.classList.add('hidden');
} else {
resultDiv.classList.add('hidden');
errorDiv.textContent = 'Error: ' + data.error;
errorDiv.classList.remove('hidden');
}
})
.catch(error => {
resultDiv.classList.add('hidden');
errorDiv.textContent = 'Error: ' + error.message;
errorDiv.classList.remove('hidden');
});
});
document.getElementById('copyButton').addEventListener('click', function() {
const shortUrl = document.getElementById('shortUrl').textContent;
navigator.clipboard.writeText(shortUrl)
.then(() => {
alert('URL copied to clipboard');
})
.catch(err => {
alert('Failed to copy URL');
});
});
No comments:
Post a Comment