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

IP Address Tracker

Ian• 140

@IanMcbull

Desktop design screenshot for the IP Address Tracker coding challenge

This is a solution for...

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

Design comparison


SolutionDesign

Solution retrospective


I'd like some feedback on my JS. I feel that I can improve on it and write more DRY code.

Community feedback

Antonio Aurello• 230

@antonADev

Posted

Hi Ian... First of all congratulations for finishing the challenge 🎉. The overall work is not bad, but there are some issues:

  • It's important, for accessibility issues, to use landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology. Like in the example above with the use of HTML5 Semantic Elements.
<body> 
     <header>HEADER CONTENT</header> 
     <main>MAIN BODY CONTENT</main> 
     <footer>FOOTER CONTENT</footer> 
</body> 
  • Buttons should have discernible text that clearly describes the destination, purpose, function, or action for screen reader users. You can achieve this with the aria-label attribute.
  • Images should have always an alternate text. So, the alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

As for the design, like I've already said, the overall work is not bad, but there are some parts that can be perfectioned:

  • Try always to work on your challenges or projects with the mobile-first approach. In your case, it isn't mobile responsive.
  • Other issues are just some size proportion issues, challenge yourself to play a bit around with your css, you can achieve it in no time.

Hope my answer will help you to improve your skills and keep coding 😊

Marked as helpful

0

Ian• 140

@IanMcbull

Posted

@antonADev Hey. Thanks for taking the time to provide such a detailed feedback. I'll be working on it later today to make it more responsive. I must have clearly missed something. I thought I made it responsive. I will work on it.

0
Maurice• 50

@Immacio

Posted

Looks like the site isn't responsive for mobile devices, might need to add margins in this case

0

Ian• 140

@IanMcbull

Posted

@Immacio Thank you for the feedback. I'll fix it.

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