Frontend Mentor - Shortly URL shortening API Challenge

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: Live

Built with

• HTML5
• CSS3 (Flexbox only)
• Javascript (use of fetch only)
• Mobile first apporach

What I learned

We can create a line between divs and make it responsive using the ::before or ::after pseudo elements. I make a simple example myself in codepen.io here.

Author

• Frontend Mentor - @sidneyfrancois

Acknowledgments

I wanna to thank Adriano Escarabote, seeing his solution made me visualize css tricks that could be used in this challange, seeing his code was a learning experience.