Sujay's Free Tools(URL shortener tool)
Below is a simple example of a responsive URL Shortener Tool using the https://api.shrtco.de free library. Please note that for a fully functional tool, you would typically need server-side code (like Node.js, Python, etc.) to handle API requests securely. In this example, the API calls are made directly from the client-side JavaScript, which is not recommended for production due to security concerns.index.html:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Shortener</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>URL Shortener</h1>
<div class="form">
<input type="text" id="urlInput" placeholder="Enter URL">
<button onclick="shortenUrl()">Shorten</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>styles.css:body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.form {
margin-top: 20px;
}
input {
padding: 10px;
width: 70%;
}
button {
padding: 10px;
cursor: pointer;
background-color: #4caf50;
color: #fff;
border: none;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
}script.js:function shortenUrl() {
const urlInput = document.getElementById('urlInput').value;
const resultDiv = document.getElementById('result');
if (urlInput.trim() === '') {
resultDiv.innerHTML = 'Please enter a valid URL.';
return;
}
// Using shrtco.de API to shorten the URL
fetch(`https://api.shrtco.de/v2/shorten?url=${urlInput}`)
.then(response => response.json())
.then(data => {
if (data.ok) {
resultDiv.innerHTML = `<strong>Shortened URL:</strong> <a href="${data.result.short_link}" target="_blank">${data.result.short_link}</a>`;
} else {
resultDiv.innerHTML = 'Failed to shorten the URL. Please try again.';
}
})
.catch(error => {
console.error('Error:', error);
resultDiv.innerHTML = 'An unexpected error occurred. Please try again later.';
});
}Remember that using a client-side approach for API calls exposes your API key, which is not secure. In a production environment, you should use a server-side solution to keep your API key confidential.
Comments
Post a Comment