aalo826 / url-shortener

A project using assets from FrontEnd Mentor

URL shortener API

This is a solution to the URL shortening challenge frontendmentor.io

About the Project

The goal of this project was to mimic a website, both mobile and desktop from the designs provided by Frontend Mentor. Another goal was to implement the shrtcode API to shorten URLs that the user could input on the website.

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

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Shrtcode - URL shortening API

What I learned

From this project, I gained a deeper understanding on how to manipulate data received from an API and how to append them onto the page. I have worked with API's and displaying their data onto web pages from the user interaction through event listeners, and thus this was a good review on those concepts.

The hardest part of the project for me was coding the functionality of the copy button. A big issue I faced when working on it was that it only copied the most recent link that user had inputed. Luckily with more research and work I managed to find a solution that required much less code than I anticipated.

Useful resources

• Shrtco.de - API used to shorten URL's in this project