Responsive advice generator

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing the Advice Generator App project on Frontend Mentor, Amelia! It's an achievement that showcases your growing skills in web development. Here are a few tips to further enhance your project:

  1. Async/Await Error Handling:

     • In your JavaScript getJSON function, consider implementing error handling with try...catch blocks. This helps to gracefully handle network errors or issues with the API. For instance:

       const getJSON = async url => {
         try {
           const response = await fetch(url);
           if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
           }
           return await response.json();
         } catch (error) {
           console.error("Fetch error: " + error.message);
         }
       }
       

  2. CSS Media Query Optimization:

     • In your CSS, the media query for mobile devices (@media only screen and (max-width: 450px)) can be optimized for better responsive design. Instead of hardcoding the button's left position, consider using left: 50% and transform: translateX(-50%) for horizontal centering. This approach is more flexible and adjusts automatically with different screen sizes.

  3. Accessibility Improvement:

     • Enhance accessibility by adding aria-label to your button element. Since the button only has an image, screen readers may not convey its purpose. An aria-label like aria-label="Generate new advice" would be helpful.

  Resources for Learning:

  • To deepen your understanding of error handling in JavaScript, visit MDN Web Docs - try...catch.
  • Learn more about responsive design and CSS best practices on CSS Tricks.
  • For accessibility guidelines, refer to the Web Content Accessibility Guidelines (WCAG).

  Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟

  Marked as helpful

  1

  ---

  

  Amelia Dutta•160

  @amelia2802Posted 10 months ago

  Thank you @petritnuredini for your tips and resources! Those are really helpful, especially the centering of the button! 😄

  0
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 10 months ago

  Hello there 👋 @amelia2802

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Happy coding.

  Marked as helpful

  1

  ---

  

  Amelia Dutta•160

  @amelia2802Posted 10 months ago

  Thank you @Ezekiel225 for suggesting the extension! 😊

  0