Frontend Mentor - Shortly URL shortening API Challenge solution

This is a solution to the Shortly URL shortening API Challenge 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
• 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

• Solution URL: Check out my solution on Front end mentor
• Live Site URL: Check out the live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Tailwindcss
• Vanilla Js
• Mobile-first workflow

What I learned

In this challenge, I embarked on a journey to practice asynchronous JavaScript, primarily focusing on interacting with APIs. Initially, I was provided with an API to shorten URLs, and I diligently explored its documentation. Despite my efforts, I encountered multiple roadblocks when attempting to utilize the API successfully. The frustration began to set in until I made a startling discovery - the API endpoint I was working with had gone offline and was no longer accessible.

Undaunted by this setback, I began searching for alternative APIs to achieve my goal. This search presented its own set of challenges, as I encountered various errors and struggled to understand the intricacies of API consumption.

Nonetheless, I persevered and gained valuable skills in the process. I became adept at understanding API documentation, a vital skill for developers. I also improved my problem-solving skills, which are essential in the world of programming.

Furthermore, I explored local storage for the first time. It was a learning experience that involved trial and error. Eventually, I successfully incorporated local storage into my project, and this gave me confidence in using it for future projects.

In summary, this experience was more than just a coding challenge; it was a journey of growth and discovery. It reinforced the importance of resilience and resourcefulness when tackling complex programming tasks.

Continued development

I'm looking forward to working with APIs more extensively in my future projects. Additionally, I plan to make further use of local storage before venturing into more advanced server-side tools for data storage and communication.

Author

• Linkedin - Martins Ogundipe
• Frontend Mentor - Martinsgundi
• Twitter - Martinsgundi1