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. e.preventDefault(); parent.prepend (link); }
  
  }); form.addEventListener( "submit" , async (e) => { 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>` ; } 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 . 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 method. This is what our object looks like after conversion from JSON. fetch .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 this will create an element dynamically whenever a user requests a short link and then we will give it a class by using )After that we have to add the text and we can do that by using method and set it equal to the short link from the object. document.create() ( link.className = “output”; link.innerHTML And at the end we will prepend it the parent container so that new short links appear first using . Instead of using prepend you can also use method which will add the new element at the end. .prepend(link) .appendChild(link); 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 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. codepen 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

CodePen

Fetch

Google

Target

Validate Form Inputs with HTML, CSS and JavaScript

I'm a Self Taught Developer, and I Feel Stuck!

Visit My Blog

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Humor

Too Long; Didn't Read

How to Build Your own Rick-roll URL Shortener App

How to Build Your own Rick-roll URL Shortener App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

I'm a Self Taught Developer, and I Feel Stuck!

10 Indications That You Should Invest in Automation Via APIs

113 Stories To Learn About Api Development

How To Import External Data Into Google Sheets Without Copy/Paste

4 Notion + Zapier Integrations You Can Implement Today

5 Best Practices for Integrating with External APIs

I'm a Self Taught Developer, and I Feel Stuck!

10 Indications That You Should Invest in Automation Via APIs

113 Stories To Learn About Api Development

How To Import External Data Into Google Sheets Without Copy/Paste

4 Notion + Zapier Integrations You Can Implement Today

5 Best Practices for Integrating with External APIs

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps