Skip to content
Submitted over 2 years ago

URL shortening API landing page with vanilla javascript

accessibility
Yacine Kahlerras•820
@yacineKahlerras
A solution to the URL shortening API landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

that was pretty fun challenge

  • added a scroll down to the shortened link and animation to highlight it so that when there's too many new links you'll always see where it is, its very useful in mobile.
  • also i learned that when i add a transform to an element its ::before and ::after will get a new Stacking Context which will make it appear on top of the element which is weird.

if you have any suggestions please let me know 🐢

Code

Please log in to post a comment

Log in

Community feedback

  • y brown•190
    @yosefbrowncode

    Yacine,

         This is great work. I am very impressed by the additional animation that you added. it makes it very clear where your new link is located. Keep up the great work.

    One thing that I would suggest is to add some sort of error when a person adds an invalid link or just some random text. at the moment your solution does not have that.

    Other than that Amazing work.

    Keep it up

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord