623 reads

How to Build Your own Rick-roll URL Shortener App

by Taimoor SaddiqueJanuary 8th, 2022

Too Long; Didn't Read

Step by step guide on how to make your own url shortener. This wil help you understand how to integrate APIs.

featured image - How to Build Your own Rick-roll URL Shortener App

In this article I will show you how you can make your own url shortener. Before really starting to make a free url shortener. Let’s first understand a few basics.

What is a URL shortener?

A URL shortener is actually a service that is provided by a website. This service turns your long and ugly URLs into short and easy-to-remember URLs. You might have come across with a few URL shorteners like bitly, cuttly and some others. They all have the same purpose which is to shorten a URL.

What you will be making?

This is what we are making, the style is not outstanding, I know that. I am focusing more on the functionality and the basics so that you could understand the true concept of making a free URL shortener.

Steps needed to make free URL shortener

We have to follow these steps to make our free URL shortener

HTML – for markup
CSS – for styling our free URL shortener
JavaScript – to make our free URL shortener functional by calling API and listening events

Step 1: HTML

Now Let’s start adding html. Now I am going for a simple page with a form that has a button and an input field where user can paste the original URL. That’s all we need and then I will enclose the form in a parent div just to add a background and make form align perfectly in the center.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URL Shortener</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <h1>URL Shortener</h1>
      <form id="form">
          <input id="link" type="text" placeholder="Enter your link">
        <input type="submit" value="shorten it!">
      </form>
    <ul id="parent" class="shortLinks">
    </ul>
  </div>
  <script src="script.js"></script>
  
</body>
</html>

Step 2: CSS

Now that we have written the html now we have to add CSS file to the html file. And you can do that by using link tag inside your head tags in html as explained in the snippet below.

<head>
<link rel=”stylesheet” href=”style.css”>
</head>

Now lets start writing CSS. First thing that I do in my CSS file is remove the margin and padding of all the elements. And I do that using “*” which represents all the elements in html and I set margin and padding to zero.

style.css

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap');
*{margin:0;
  padding:0;
  box-sizing:border-box;
}

Now I will style the parent by giving it width and height and a display of flex. I am setting display flex so that I can align the form in the center by setting justify-content to center.

.wrapper{width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    flex-direction:column;
    background-image:linear-gradient(135deg, rgb(30, 110, 162), salmon);
    padding:50px 0;
  }

I decided to add a gradient because that makes it look cooler.

Now lets style the other elements I have written the code for that here it is:

  ul {list-style-type:none;
    
  }
  li{margin:30px 0;
    font-size:2em;
    font-family: 'Source Sans Pro', sans-serif;
    color:lightblue;
  }
  a {color:inherit;}
  form{margin:50px 0;
    width:100%;
    max-width:500px;
  }
  input{
      margin:0 15px;
    font-size:20px;
    padding:10px;
    border:5px solid lightgrey;
    outline:none;
  }
  
  input[type=submit]{padding-left:30px;
    padding-right:30px;
  }
  input:focus{outline:none;}
  
  h1{font-size:50px;
    font-family: 'Source Sans Pro', sans-serif;
    color:white;
    font-weight:900;
    font-size:5em;
    text-transform:uppercase;
    
  }

Step 3: JavaScript

Ok so now we have added the html and CSS to make it look good. Now we also have to add JavaScript to make it functional. With the help of JavaScript we will be able to get user input and process it. We will be using fetch to send a get request to an API service. The API service that I am using is "shortcode". First of all lets get user input from the form. And we also have to select the container where we want to output the short link.

script.js

const form = document.getElementById("form");
const linkInput = document.getElementById("link");
const parent = document.getElementById("parent");

Now we have to add an event listener on form.

form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const originalLink = linkInput.value;
    const apiUrl = `https://api.shrtco.de/v2/shorten?url=${originalLink}`;
  
    try{
      const response = await fetch(apiUrl);
      const data = await response.json();
      console.log(data);
      let link = document.createElement("li");
      link.className = "output"
      link.innerHTML = `<a href="${data.result.full_short_link}" target="_blank">${data.result.full_short_link} </a>`;
      parent.prepend (link);
  
    }catch(e){
      
      console.error(e);
    }
  
  });

There are a lot of things that are happening in this code. Let me explain you what this is. First of all we are sending a get request using fetch. Then we are converting the response from JSON to JavaScript object. We are doing this because initially our response is in JSON format and we have to convert it into a JavaScript object to be able to use it. So we do that using .json(); method. This is what our object looks like after conversion from JSON.

You can also check that in your console by using console.log().

Now to display the short link nicely we are making another element using document.create() this will create an element dynamically whenever a user requests a short link and then we will give it a class by using ( link.className = “output”; )After that we have to add the text and we can do that by using link.innerHTML method and set it equal to the short link from the object.

And at the end we will prepend it the parent container so that new short links appear first using .prepend(link). Instead of using prepend you can also use .appendChild(link); method which will add the new element at the end.

Resources for making free URL shortener

Now if you have followed all the steps that I mentioned, your final result will look like this. I have shared my result using codepen so you will be able to see all the things that I have done. And if you have missed something you can check in my code and fix the issues.

API service: https://shrtco.de/

Font: https://fonts.google.com/specimen/Source+Sans+Pro?query=Source+Sans+Pro

Codepen: url shortener

Feel free to use the code and do some experiments. Or you can make your own version of free URL shortener by making changes to layout or design and maybe add more functionality to it.

First published here