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 app

Dusanβ€’ 700

@DEmanderbag

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


This application does not have support for local storage but it's something that will be added soon.

Let me know what you think about my solution.

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Greetings, DuΕ‘an! πŸ‘‹

It's great to see you completing so many challenges! πŸ˜ƒ Nice job on this one! πŸ‘

I think your solution looks pretty good and responds well. The only thing I noticed that I think you should look into is that certain styles from the mobile navigation appear in the desktop navigation when it is clicked in the desktop layout. I suggest disabling the mobile navigation in the desktop layout entirely to prevent this from happening. πŸ˜‰

Keep coding (and happy coding, too)! 😁

1

Dusanβ€’ 700

@DEmanderbag

Posted

Hey, @ApplePieGiraffe!

I might be missing something but can you let me know how should I do this? Only load JS for mobile navigation when it's a small screen using @media?

I know that styles are getting activated but I don't think it's creating an issue or at least I didn't notice any πŸ˜€

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@DEmanderbag

On my screen, the mobile navigation links appear in a column layout and create some extra space near the top of the screen when I click on the desktop navigation (but the "x" button isn't present, meaning the mobile menu can't be closed).

If you reused the same markup and simply applied different styles to the navigation for the mobile and desktop layouts, you can simply use a media query to make sure that the mobile styles only apply to the mobile navigation (and vice versa).

If you're using JS to inject markup into the DOM for the mobile navigation (which might be the case), then you can detect the width of the screen (with something like screen.width, I think) and then use a conditional expression to load the markup for the mobile navigation based on the width of the viewport.

You might not have to all of that, however. The mobile navigation seems to appear when the navigation links in the desktop layout are clicked, so perhaps only adding an event listener to the hamburger menu (and not the entire navigation or something) might do the trick!

BTW, I like the way the navigation links fade in one-by-one in the mobile navigation! πŸ˜€

Good luck and have fun! πŸ‘

1
Dusanβ€’ 700

@DEmanderbag

Posted

@ApplePieGiraffe Thank you for the detailed explanation,

I will take this feedback and update my website. I think that I understand now what is causing this issue.

Thank you again and happy coding πŸ‘ πŸ˜„

1

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