Shortly - URL shortner

Get short URL instant, use shortly shorten and replace long URL to short link.

Table of contents

• Shortly - URL shortner
• Table of contents
• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• Shorten any valid URL
• See a list of their shortened links, even after refreshing the browser
• Copy the shortened link to their clipboard in a single click
• Receive an error message when the form is submitted if:
  • The input field is empty

Screenshot

Links

• Live Site URL: shortly

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Vanilla JavaScript
• REST API

Fetching URL Code snippets, see below:

const getShortURL = async (url) => {
  const response = await fetch(`https://api.shrtco.de/v2/shorten?url=${url}`);
  const data = await response.json();
  return data;
};

QRCode.js

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>

Continued development

Areas that I want to continue focus through this project is production build ready code, connecting to kanban for issue tracking.

Useful resources

• Clean JavaScript Code - This is an amazing article which helped me finally understand writing clean javascript code. I'd recommend it to anyone still learning this concept.

Author

• Website - blogtheorem
• Frontend Mentor - @enggsuraj
• Twitter - blogtheorem