Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

URL shortening API landing page with vanilla javascript

#accessibility

@yacineKahlerras

Desktop design screenshot for the URL shortening API landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

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 🐢

Community feedback

y brown 190

@yosefbrowncode

Posted

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

0

@yacineKahlerras

Posted

@yosefbrowncode Thanks for the feedback, you gave me a kind of an idea I thought I needed to make a regex to check the format of the inputed link, but actually there's a lazy way to it which just says invalid format when the fetch brings back an error.

if you have any other remarks please share them and happy coding !

0
y brown 190

@yosefbrowncode

Posted

@yacineKahlerras Yeah I did the lazy way but it works for a simple app like this. I made a simple function if they forgot to enter a link - No Text Entered if (linkText.length == 0) { errorMessageEmpty.innerHTML = "Please add a link"; resetVal.focus(); resetVal.classList.add("focusChange"); }

For this I used the Error of the Api call .catch(function (error) { // handle error if (linkText.length > 0) { resetVal.focus(); resetVal.classList.add("focusChange"); errorMessage.innerHTML = "Please check your link"; } });

Hope this was helpful. I am still learning so it could be that this is not the greatest way to do things.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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