Rest Countries with VanillaJS + JSON +TailwindUI + CSS

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @abdullahelmetwali,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

  1. Image Stretching on Larger Screens: When you increase the screen size to large, your images are stretched to the whole width. To fix this, define a max-width for the body and center it using margin:

     body {
       max-width: 1440px;
       margin: 0 auto;
     }
     

  2. Vertically Stretched Images: Your images look vertically stretched due to the height setting in your CSS. Remove the height property to make them look normal:

     .mainImg {
       /* height: 30dvh; */
     }
     

  3. JavaScript Improvements:

     • Error Handling: Add error handling for the fetch operation to manage any potential issues that might arise.
     • Avoid Inline Event Listeners: Instead of adding event listeners inside the fetch function, define them separately and reference them. This makes the code cleaner and easier to debug.

     Here’s an example of how to implement these improvements:

     async function fetchData() {
       try {
         const response = await fetch('your-api-endpoint');
         if (!response.ok) {
           throw new Error('Network response was not ok');
         }
         const data = await response.json();
         // Process your data here
       } catch (error) {
         console.error('There has been a problem with your fetch operation:', error);
       }
     }
     
     function setupEventListeners() {
       const button = document.getElementById('yourButton');
       button.addEventListener('click', handleClick);
     }
     
     function handleClick() {
       // Your click handler code here
     }
     
     // Call your functions
     fetchData();
     setupEventListeners();
     

  These improvements will enhance the user experience and make your code more maintainable.

  I hope you find this helpful.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  1

  ---

  

  Abdullah ElMetwali•160

  @abdullahelmetwaliPosted 4 months ago

  Thanks u @krushnasinnarkar . I made the

  .mainImg {
    /* height: 30dvh; */
  }
  

  cause not all imgs have the same width , so they are not aligned on a one line. But for fetching , thank u bro for your helpful advice 😁

  0