tml
Copy code
URL Shortener Tool
CSS (styles.css):
css
Copy code
body {
font-family: 'Arial', sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
}
h1 {
color: #333;
margin-bottom: 1rem;
}
.input-container {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
input[type="text"] {
width: 70%;
padding: 0.5rem;
border: 2px solid #007bff;
border-radius: 5px 0 0 5px;
outline: none;
}
button {
padding: 0.5rem 1rem;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.output-container {
margin-top: 1rem;
}
.shortened-url {
padding: 0.5rem;
background-color: #e9ecef;
border-radius: 5px;
display: inline-block;
margin-top: 0.5rem;
color: #007bff;
cursor: pointer;
transition: background-color 0.3s;
}
.shortened-url:hover {
background-color: #d6d8db;
}
JavaScript (script.js):
javascript
Copy code
document.getElementById('shorten-btn').addEventListener('click', function() {
const urlInput = document.getElementById('url-input').value;
if (urlInput === '') {
alert('Please enter a URL.');
return;
}
fetch(`https://api.shrtco.de/v2/shorten?url=${encodeURIComponent(urlInput)}`)
.then(response => response.json())
.then(data => {
if (data.ok) {
displayShortenedURL(data.result.full_short_link);
} else {
alert('Failed to shorten URL. Please try again.');
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred. Please try again.');
});
});
function displayShortenedURL(shortenedURL) {
const outputContainer = document.getElementById('output-container');
const shortenedURLElement = document.createElement('div');
shortenedURLElement.classList.add('shortened-url');
shortenedURLElement.textContent = shortenedURL;
shortenedURLElement.addEventListener('click', () => {
navigator.clipboard.writeText(shortenedURL);
alert('Shortened URL copied to clipboard!');
});
outputContainer.innerHTML = '';
outputContainer.appendChild(shortenedURLElement);
}
