Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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 using Sass and localStorage

#sass/scss#fetch
Byron 2,180

@byronbyron

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


Hello ladies and gentlemen! This was a rather nice challenge to do. I chose to use Sass without any CSS framework just for a laugh (also saves weight and there's one less dependency). Vanilla JS for the mobile menu, validation, copy to clipboard and fetch api. Also added a little fancy mobile menu toggle animation. It probably doesn't work in IE11, but who still supports that browser anyway? No one. 😆

Like always, please leave a like and maybe a lovely little comment as well. Thanks!

Update: I've added localStorage so the links should now persist!

Community feedback

@beth-codes

Posted

this is really nice, I must say. I can't even tell the differene

Marked as helpful

0

Byron 2,180

@byronbyron

Posted

Wow thanks @beth-codes!

0

@moniquedsilva

Posted

Looks really good. Congratulations!

Marked as helpful

0

Byron 2,180

@byronbyron

Posted

@moniquedsilva Thanks! 🎉

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