URL shortening API

Live | Solution | Challenge

About The Project

The goal of this landing page challenge is integration with the shrtcode URL shortening API and playing with browser storage. The challenge is to integrate with the shrtcode API to create shortened URLs and display them like in the designs. You can use any JavaScript framework/library on the front-end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.

Project Goals:
1. Create a landing page with responsive design. 2.Implement hover states for interactive elements.
3. Allow users to shorten valid URLs.
4. Enable users to copy shortened links to their clipboard with a single click.
5. Display an error message if the form is submitted with an empty input field.
6. Maintain a list of shortened links, even after the browser is refreshed.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex
• Grid
• Desktop-first workflow
• Shrtco - url shortening API

Useful resources

1. Figma - Paste your design image to check the size of containers, width, etc.
2. Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.