Advice Generator App with Async Function

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year ago

  Congratulations on completing your Advice Generator App project! 🎉 It's impressive to see you bring together different technologies to create a functional and visually appealing application. Here are some best practices and suggestions to enhance your project:

  • HTML and CSS Best Practices:

    • Great job on using semantic HTML tags! Keep this practice as it improves accessibility and SEO.
    • In your CSS, consider organizing properties in a consistent order, such as positioning, box model, typography, and visual styling. This makes your code more readable and easier to maintain.

  • Responsive Design:

    • You've implemented a responsive design using media queries. Test your app on various devices to ensure it adapts well to different screen sizes.
    • Check text sizes and button dimensions on mobile devices to ensure they are touch-friendly and easily readable.

  • JavaScript Best Practices:

    • Consider using const for variables that don't change and let for variables that do. This provides clarity on which variables are meant to be immutable.
    • In your fetchAdvice function, move the URL 'https://api.adviceslip.com/advice' to a constant at the top of your script. This makes it easier to manage and change if needed.

  • Accessibility and Usability:

    • Ensure that all interactive elements (like buttons) have appropriate focus and hover states to improve accessibility and usability.
    • Add aria-label to elements like buttons for screen reader users, especially when the button only contains an image.

  • Code Comments and Cleanup:

    • Remove any commented-out code that is not being used, such as the <div> with id creation. This helps keep your codebase clean and maintainable.
    • Add comments to your CSS and JavaScript files to explain what certain blocks of code are doing, which can be especially helpful for more complex sections.

  • Performance Optimization:

    • Optimize your images to reduce file size for faster page loading times. Tools like TinyPNG can compress images without losing quality.

  • Cross-Browser Compatibility:

    • Test your app in different browsers to ensure it works and looks consistent across them.

  References for Further Learning:

  • CSS and HTML Best Practices: MDN Web Docs
  • Responsive Web Design: A List Apart
  • JavaScript Best Practices: JavaScript.info
  • Accessibility: Web Accessibility Initiative (WAI)

  Keep pushing your limits and exploring new aspects of web development. Your progress is inspiring, and I'm excited to see what you'll create next! 💻🌟

  21

  Marked as helpful