Goldac77/URL-Shortener

Frontend Mentor - Shortly URL Shortening API Challenge solution

This is a solution to the Shortly URL shorting API Challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The task was to build a URL shortener using shrtcode API, where users can enter a valid URL and have it shortened.

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

• Solution URL: My solution
• Live Site URL: Goldac77 - URL Shortener

My process

My approach to this challenge was first tinker with the shrtcode API and learn how to properly fetch data from it and how to make use of said data. I then went ahead to work on the functionality of the page(how to make the request and display the shortened links), before I worked on the design based on the design files

Built with

• Semantic HTML5 markup
• Flexbox
• Bootstrap
• Mobile-first workflow

What I learned

The major thing I learnt from this project is how to make use of the clipboard API, and how to fetch and make use of API requests.

Continued development

I believe I need to work on the knowledge in manipulating dynamically rendered DOM elements, like the ones I used in my #display div

Author

• Nicholas Amemazior
• Frontend Mentor - @Goldac77

Important Update

The Shortly API is no longer working, hence this web application cannot shorten URLs. It will be updated at a later time