DEV Community

Cover image for Building a Simple URL Shortener With Just HTML and Javascript

Building a Simple URL Shortener With Just HTML and Javascript

Palash Bauri 👻 on August 16, 2018

URL Shortener, you might have used one of them in your life such as bit.ly, goo.gl and much more. They are useful for shortening long URLs so tha...
Collapse
 
jhotterbeekx profile image
John Hotterbeekx

Thanks for sharing! I've never heard of jsonstore.io, seems like a great product to use for quick prototyping.

If I could give you some pointers on your code, try and be consistent in the naming conventions you are using on methods and variables. Right now it seems like you sometimes use snake casing, like protocol_ok and send_request, while most of the time you don't case at all, like genhash or getrandom. Imagine them all being like

let protocolOk;
sendRequest()
genHash();
getRandom();

or if you prefer snake casing:

let protocol_ok;
send_request()
gen_hash();
get_random();

This reads a lot easier right. Try and remember writing the code so it's easy to read for others, and you'll see your code becoming cleaner and cleaner.

Collapse
 
bauripalash profile image
Palash Bauri 👻

Thank You, I'll keep these in mind

Collapse
 
gijovarghese profile image
Gijo Varghese

Great one. It's much easier to create your own URL shortener with Netlify. See my post: How to Create Your Own Private URL Shortener for Free

Collapse
 
jonasroessum profile image
Jonas Røssum

Really? You pull jQuery in for an ajax request?

I would recommend to just use fetch instead, as it is build into most browsers. If you are concerned about browser compatibility, use a polyfill.

Collapse
 
bauripalash profile image
Palash Bauri 👻

Ah, I'll look into it soon to make it better.
Thank You

Collapse
 
bauripalash profile image
Palash Bauri 👻

For Sending Json Request, I created a function with XMLHttpRequest() (Code)

(Actually I have changed the storage provider so APIs are little different but understandable)

First, we open a new connection to your storage provider, then tell them that we are going to send json data.
Then create a JSON Object something like this {"l":<LONG_URL> , "s": <SHORT_URL_SLUG>} then send the json object to my JSONBOX endpoint (yes, I have switched to jsonbox from jsonstore).

Collapse
 
georgewl profile image
George WL • Edited

I'm curious why you're not using the more widely used const and let syntax tbh, it makes the code much clearer in my opinion and you have to worry less about scoping.

Also, have you tried the new Fetch API? It's much easier to work with than Ajax

Collapse
 
bauripalash profile image
Palash Bauri 👻

Agree with you 👍.
Actually I'm thinking of rewriting this article after my exams.

Collapse
 
rafaacioly profile image
Rafael Acioly

thank you and congratulations!
I'm also building a url shortner (with Go to study) and I did not know aboutjsonstore.io, here is the project; github.com/rafa-acioly/urlshor

Collapse
 
bauripalash profile image
Palash Bauri 👻

I checked you repo. Great Idea!

Collapse
 
bauripalash profile image
Palash Bauri 👻

Actually I have plans for rewriting this month. I hope it will be soon.

I have only used jQuery for sending and fetching json requests. Which could be easily converted to Vanilla, infact I didn't use jQuery for the production. Meanwhile You can check that out the source and find your answers

GitHub logo bauripalash / fossurl

Your Own Url Shortner Without any fancy server side processing and support for custom url , which can even be hosted on GitHub Pages

. .

🌐 Open fossurl.ml

What is Fossurl

Fossurl is an simple URL Shortener Which Can Be Hosted For Free in Github/Gitlab Pages or in Static Site Hosting Service and It doesn't need you to buy any server!

🎯 Goal

Implementing a Simple URL Shortner which can be used without need of any hardcore server side processing and can be hosted on Static Site Hostings such as GitHub/Gitlab Pages

💻 Stack

  • HTML
  • CSS
  • JavaScript
  • Database : jsonbox.io (Previously , jsonstore was used but several downtimes forced me to switch to jsonbox)

🛠️ Features

  • It's fast
  • It doesn't require any hosting server
  • You can use it just by forking the repo and running a script

👻 Wanna Help Improve It?

Steps:

  • Fork This Repo
  • Clone On Your Device or Open in Gitpod
  • On Linux cd to src direcotory and on Windows do whatever it's neccesary to change directory to src
  • If you're on…
Collapse
 
tomakali profile image
David jeba

how to see the stats of the short url?
clicks, demographics, utm builder etc?

Collapse
 
bauripalash profile image
Palash Bauri 👻

Not implemented yet!

Collapse
 
eduardo305 profile image
eduardo305

Great article. My only question is how do you guarantee the short url is unique with the getRandom function? How many unique urls do you think the algorithm can provide?

Collapse
 
bauripalash profile image
Palash Bauri 👻

It's just simple guide , I've not made it complex, to let beginners understand the code easily.

Here's the production code,

bauripalash / fossurl

Your Own Url Shortner Without any fancy server side processing and support for custom url , which can even be hosted on GitHub Pages

FossURL 🔗

An Easy to Use URL Shortner Without Needing a User to setup a fancy Server with PHP or NodeJs to work.

>Working Demo<

our old domain fossurl.palash.tk is no longer used , instead we use fossurl.ml

Current Version : 2.0 beta

🎯 Goal Of This Project

Implementing a Simple URL Shortner which can be used without need of any hardcore server side processing and can be hosted on Static Site Hostings like GitHub/Gitlab Pages

💻 Technologies Used

  • Client Side
    1. HTML
    2. CSS
    3. JavaScript
      • jQuery
      • SimpleCopy
  • Server Side
    1. Database : jsonstore.io

TODOs:

  • Shorten via api [Work in Progress]

  • Add Custom URL Supoort [DONE]

⚠ Warning

Please Don't Use FossUrl to shorten any sensitive Information , important files or any other sensitive things which can create privacy issues for an individual or a company or an organisation.

Licence : MIT

Logo License : Creative Commons Attribution-ShareAlike 4.0 International License

Please Contribute 😊


If You Like My Work Consider

Collapse
 
leonorader profile image
Leonora Der

+1 for jsonstore.io! thanks a lot for the tip! :)

 
bauripalash profile image
Palash Bauri 👻

Yes, jQuery was only used to send and fetch data from Jsonstore. But in present I ditched both jQuery and Jsonstore.