Responsive Results Summary Component using CSS and JavaScript

Community feedback

• 

  Outstandinggirl13•70

  @Outstandinggirl13Posted about 1 month ago

  I really like that you kept your code simple and readable, and how you used grid for positioning elements — well done! Based on what I see in your code, I have a couple of tips:

  First, try using semantic elements like <main>, <section>, <article>, and <footer> instead of relying only on <div>s to improve the semantics of your HTML. These elements help assistive technologies communicate the content's structure and hierarchy more effectively, which is crucial for individuals with disabilities.

  Also, if you want your <div class="main"> element to be centered in the viewport, I recommend changing the position of the attribution to fixed. This will take the attribution element out of the document flow, preventing your main element from being shifted up. Try adding the following code to the attribution: .attribution { position: fixed; bottom: 0; }.

  I see that fetching data from the JSON file works perfectly now — you figured out how to fix the error too :) For your JavaScript code, I have a small suggestion: it’s generally better to declare variables with const or let instead of var to avoid unexpected behavior related to variable scope.

  Hopefully, these tips will be useful for you!

  Marked as helpful

  1

  ---

  

  M Asim Saeed•270

  @asimsaeed353Posted about 1 month ago

  @Outstandinggirl13 I have noted I need to learn more about semantic tags and try using it in HTML. The tip to center the main div is super helpful and tbh I have struggled with it.

  And I searched about fetch API after banging my head for hours debugging my code. And thankfully I came up with a solution. Your app.js code was helpful in devising the approach.

  I appreciate your valuable tips and looking forward to learning more from you. Thanks a lot!

  0

  

  Outstandinggirl13•70

  @Outstandinggirl13Posted about 1 month ago

  @asimsaeed353 The pleasure is mine, I really appreciate your thoughtful reply and kind words, they give me the motivation to keep improving

  0

  

  M Asim Saeed•270

  @asimsaeed353Posted about 1 month ago

  @Outstandinggirl13 I will appreciate your valuable suggestions and tips on my solutions. And you are doing amazing, keep it up!

  0
• 

  Justin•540

  @iamprincetjPosted about 1 month ago

  Congrats on finishing this challenge, with fetching data in your data.json file you can still use fetch('data.json').

  0

  ---

  

  M Asim Saeed•270

  @asimsaeed353Posted about 1 month ago

  @iamprincetj Thanks for the appreciation, I tried using it but it was not working at my end. I would appreciate if you could elaborate on that.

  0

  

  Justin•540

  @iamprincetjPosted about 1 month ago

  @asimsaeed353 You have some data in your data.json file you can get them using this code any where in your JS file:

  fetch('path/to/your/data.json')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      // You can now use the data as needed
    })
    .catch(error => {
      console.error('Error fetching the data:', error);
    });
  

  Marked as helpful

  0

  

  M Asim Saeed•270

  @asimsaeed353Posted about 1 month ago

  @iamprincetj much appreciated. Thank you so much!

  0

  

  Justin•540

  @iamprincetjPosted about 1 month ago

  @asimsaeed353 you're welcome

  0