Submitted about 2 years ago

Responsive Url Shorten app using shrtcode API

mona Elshikh•510

@MonaElshikh

Preview site View code

This is a solution for...URL shortening API landing page

HTML
CSS
JS
API

3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi Everyone, I am happy to share my work with you, it was a nice challange , there was one challancing thing which is parsing the shorten links from localstorage, it did not work, it gaves a string even after JSON.Parse(), so after long search i found that it must be parsed twice.

i will appreciate your comments and modifications

Thanks a lot.

Community feedback

Antoine C•1,210
@mattari97Posted about 2 years ago
Hello Mona Elshikh. Congratulations on completing the challenge. I just made the same one and i think it was really fun 😊.

I have some small suggestions for you:

I think that you forgot to hide the hamburger button on desktop. Because right now i can see it and click on it even on larger screens. You might want to add a display: none at your breakpoint of choice.

Also the "Shorten it" button has two small problems:

1- The text is breaking on two lines at ~1200px which can be easily fixed with a white-space: nowrap on the button.

2- To make sure it always stays at the same height as the input you could add align-self: stretch

Hope it helps and happy coding 😀
Marked as helpful
1
mona Elshikh•510
@MonaElshikhPosted about 2 years ago
@AntoineC-dev Hi There, thanks a lot for your precious comments, i did fixed the toggle menu button in desktop already , and i will check the shorten button and will fix it, your comments were really helpfull, thanks a lot :)
1

Please log in to post a comment

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