Link Shortener
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
}
h1 {
font-size: 36px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
}
label {
font-size: 20px;
margin-bottom: 10px;
}
input {
font-size: 18px;
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
width: 100%;
max-width: 400px;
}
button {
font-size: 18px;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #3e8e41;
}
p {
font-size: 18px;
margin-top: 20px;
word-wrap: break-word;
word-break: break-all;
}
function shortenLink() {
const longLink = document.getElementById("long-link").value;
const url = "https://api.shrtco.de/v2/shorten?url=" + encodeURIComponent(longLink);
fetch(url)
.then(response => response.json())
.then(data => {
const shortLink = data.result.full_short_link;
document.getElementById("short-link").innerHTML = `
${shortLink}
`;
})
.catch(error => {
console.error(error);
});
}
No comments:
Post a Comment