Sh RajTitle: How to Create an URL Shortener Using Rebrandly, LocalStorage, Bootstrap, and jQuery
Introduction:
URL shorteners are handy tools that allow you to condense long and complex URLs into shorter, more user-friendly versions. In this step-by-step guide, we will show you how to build your own URL shortener using Rebrandly API for shortening URLs, LocalStorage to store and display the links, Bootstrap for styling, and jQuery for handling form submissions and AJAX requests. This SEO-friendly URL shortener will allow you to create shortened links and store them locally in the browser, making it an excellent project to learn and apply various web development techniques.
Step 1: Setting up the Project
Let's start by creating the basic HTML structure for our URL shortener. We'll include the required Bootstrap CSS and JavaScript files and create a form to input the long URLs. Additionally, we'll add a container to display the shortened URLs and the Copy button.
<!-- Paste this code inside the <body> tag -->
<div class="container mt-5">
<h1>URLy - Link Shortener</h1>
<form id="shortenForm" class="mt-3">
<!-- Input field for the long URL -->
<div class="input-group">
<input type="text" id="urlInput" class="form-control" placeholder="Enter your URL here" required>
<div class="input-group-append">
<button type="submit" class="btn btn-primary">Shorten URL</button>
</div>
</div>
</form>
<!-- Container to display the shortened URL and Copy button -->
<div id="shortenedURLContainer" class="mt-3" style="display: none;">
<h2>Shortened URL:</h2>
<div class="input-group">
<input type="text" id="shortenedURL" class="form-control" readonly>
<div class="input-group-append">
<button id="copyButton" class="btn btn-secondary">Copy</button>
</div>
</div>
</div>
<!-- Container to display the saved shortened URLs -->
<div class="mt-5">
<h2>Saved Shortened URLs:</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Shortened URL</th>
<th>Full URL</th>
<th>Date Time</th>
<th>Copy</th>
</tr>
</thead>
<tbody id="savedLinksBody">
</tbody>
</table>
</div>
</div>
Step 2: Adding CSS and JavaScript Libraries
To ensure that the project runs smoothly, add the following links to the head section of your HTML file:
<head>
<title>URLy - Link Shortener</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
Also, include the Bootstrap and jQuery scripts just before the closing </body> tag:
<!-- Bootstrap JS and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Step 3: Setting Up Rebrandly API
Create a Rebrandly account and obtain your API key. Replace 'YOUR_REBRANDLY_API_KEY' with your actual Rebrandly API key in the script section:
<script>
// ...
const API_KEY = 'YOUR_REBRANDLY_API_KEY';
const API_URL = 'https://api.rebrandly.com/v1/links';
// ...
</script>
Step 4: Creating the Functionality
Next, let's create JavaScript functions to handle form submissions, shorten URLs using Rebrandly API, and save the shortened URLs in LocalStorage:
<script>
// ...
// Check if local storage is available in the browser
const isLocalStorageSupported = typeof Storage !== 'undefined';
// Function to display saved links from local storage
function displaySavedLinks() {
// ...
}
// Display saved links on page load
window.addEventListener('load', () => {
displaySavedLinks();
});
// Function to handle form submission
document.getElementById('shortenForm').addEventListener('submit', (event) => {
event.preventDefault();
const inputElement = document.getElementById('urlInput');
const urlToShorten = inputElement.value;
shortenURL(urlToShorten)
.then((shortenedURL) => {
// ...
})
.catch((error) => {
console.error('Error shortening URL:', error);
});
});
// ...
</script>
Step 5: Saving Shortened URLs to LocalStorage
In the
shortenURL function, save the shortened link info in LocalStorage and display the updated saved links:
<script>
// ...
async function shortenURL(url) {
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'apikey': API_KEY,
},
body: JSON.stringify({
destination: url,
}),
});
if (!response.ok) {
throw new Error('Failed to shorten URL');
}
const shortenedURL = await response.json();
const shortenedURLContainer = document.getElementById('shortenedURLContainer');
const shortenedURLElement = document.getElementById('shortenedURL');
const copyButton = document.getElementById('copyButton');
shortenedURLElement.value = shortenedURL.shortUrl;
shortenedURLContainer.style.display = 'block';
if (isLocalStorageSupported) {
// Save the shortened link info in local storage
const savedLinks = JSON.parse(localStorage.getItem('shortenedLinks')) || [];
savedLinks.push({
shortUrl: shortenedURL.shortUrl,
fullUrl: url,
dateTime: new Date().toLocaleString(),
});
localStorage.setItem('shortenedLinks', JSON.stringify(savedLinks));
// Display updated saved links
displaySavedLinks();
}
// Enable the copy button
copyButton.disabled = false;
return shortenedURL;
}
// ...
</script>
Step 6: Implementing the Copy to Clipboard Function
Finally, let's create a function to copy the shortened URL to the clipboard:
<script>
// ...
function copyToClipboard(text) {
const tempElement = document.createElement('textarea');
tempElement.value = text;
document.body.appendChild(tempElement);
tempElement.select();
document.execCommand('copy');
document.body.removeChild(tempElement);
alert('Copied to clipboard!');
}
// ...
</script>
Step 7: Styling the Page
For styling, we have already included Bootstrap CSS, which provides a clean and responsive design for the URL shortener.
Step 8: Full Code
Here is the full code for your SEO-friendly URL shortener:
<!-- Paste the full code here -->
<script>
// ... (Complete script code from the previous steps) ...
</script>
Step 9: Try the Demo
You can see a live demo of the URL shortener at: URLy - Link Shortener Demo.
Conclusion:
Congratulations! You have successfully built an SEO-friendly URL shortener using Rebrandly API for shortening URLs, LocalStorage for storing and displaying the links, Bootstrap for styling, and jQuery for handling form submissions and AJAX requests. This project is a great way to learn about various web development concepts and improve your skills in front-end development. Feel free to explore and enhance the URL shortener further based on your requirements and preferences. Happy coding!
