Skip to content
Submitted over 2 years ago

URL shortening API landing page

Abanum Oliseyenum•230
@Codeyenum
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...URL shortening API landing page
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Second time working with an API. I learnt some new things and got it to work, but I can't catch any errors for some reason. Please, feel free to suggest ways I can correct the problem.

Community feedback

  • Mofe•440
    @Mofe620Posted over 2 years ago

    Alright thanks. Heading to codepen 💨

    1
    Abanum Oliseyenum•230
    @CodeyenumPosted over 2 years ago

    Goodluck👍🏾✨

    0
  • Mofe•440
    @Mofe620Posted over 2 years ago

    This is really nice, Olise. I had difficulty implementing the loading animation using plain CSS and Vanilla JS. How did you do it ?

    0
    Abanum Oliseyenum•230
    @CodeyenumPosted over 2 years ago

    @Mofe620 Thank you. I also had some issues😅 and it took a lot of trials to get it right.

    • I got the loading animation from a codepen
    • Wrote functions to hide/show the animation basically toggling (display: none;) on and off
    • I called the show() when the shorten link button is clicked under the right conditions
    • Then called hide() when the api results are fetched just before displaying the fetched results.
    1

Please log in to post a comment

Log in with GitHub

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