Hello developers! Today we're going to talk about a URL shortener code that we can use in our web applications.
URL shorteners have become increasingly popular in recent years, as they allow us to create shorter, more manageable URLs. These shortened URLs can be easily shared and are great for social media posts, email marketing, and other forms of online advertising.
The code we're going to look at is a simple HTML, CSS, and JavaScript implementation of a URL shortener. It uses the shrtcode API to create a shortened URL from a long one.
The HTML code consists of a form that allows users to enter a long URL and a "Shorten" button to initiate the process. When the button is clicked, the JavaScript function is called, which retrieves the long URL value and sends a request to the shrtcode API to get the shortened URL.
Once the API response is received, the shortened URL is displayed in a container and a "Copy" button is provided for easy copying to the clipboard. The CSS code provides styling for the HTML elements and makes the application visually appealing.
This code is a great starting point for anyone looking to implement a URL shortener in their web application. It's simple, easy to understand, and can be easily customized to fit specific needs.
In conclusion, URL shorteners are a great tool for managing and sharing long URLs. This code provides a simple implementation of a URL shortener that can be used in any web application. As always, happy coding!
simple URL Shortener [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
html, body {
height: 100%;
}
.maincontainer h1{
color:#fff;
text-align: center;
}
form label {
display: block;
margin-bottom: 20px;
margin-left: 10px;
color: #fff;
}
form input[type="text"] {
width: 90%;
padding: 10px;
margin:auto;
border-radius: 20px;
border:2px solid #8f94fb;
box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.25);
}
form button {
background-color: #fff;
color: #8f94fb;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 10px;
font-size: 25px;
margin-top: 20px;
}
form button:hover{
border:2px solid #8f94fb;
}
#short-url-container {
margin-top: 20px;
}
#short-url-container p{
text-align: center;
color: #fff;
}
#short-url {
display: flex;
align-items: center;
justify-content: center;
}
#short-url a {
word-wrap: break-word;
margin-right: 10px;
color: #fff;
}
.maincontainer
{
width:80%;
height: auto;
min-height:350px;
padding:40px;
border-radius: 30px;
box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.25);
background: #4e54c8;
background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);
background: linear-gradient(to right, #8f94fb, #4e54c8);
margin: auto;
}
#copy-btn{
background-color: #fff;
color: #8f94fb;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 10px;
font-size: 25px;
margin-top: 20px;
}
.credit a {
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
margin-top: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
const shortenUrl = async () => {
const longUrl = document.getElementById('long-url').value;
const response = await fetch(`https://api.shrtco.de/v2/shorten?url=${longUrl}`);
const data = await response.json();
const shortUrl = data.result.full_short_link;
const shortUrlContainer = document.getElementById('short-url-container');
const shortUrlLink = document.getElementById('short-url').querySelector('a');
shortUrlLink.href = shortUrl;
shortUrlLink.textContent = shortUrl;
shortUrlContainer.style.display = 'block';
const copyBtn = document.getElementById('copy-btn');
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(shortUrl).then(() => {
alert('Copied to clipboard!');
});
});
};
const shortenBtn = document.getElementById('shorten-btn');
shortenBtn.addEventListener('click', shortenUrl);
Thank you for reading our blog. If you face any problem in creating this simple URL Shortener using HTML, CSS & JavaScript, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team