Skip to content
OverviewSolutions
13
Comments
5
P
Grant Ramsay
@seapagan

All comments

  • Grant Ramsay•280
    @seapaganPosted over 2 years ago

    Hello @iragvantsa, great work on this challenge 🥳

    If you notice, you have a few Accessibility issues showing up in the report. Using Semantic HTML is becoming increasingly important these days to help screen-reader software and other accessibility tools.

    Using a main tag around your main content is one way you can help - I'd replace the div on line 20 with a <main> tag like so :

    <main class="grid-container">

    Remember to change the closing tag too!

    Also, H1, H2 etc. are Semantic choices, and should NOT be chosen based on the physical size or look - they can all be styled to any size or look you want. So there should be one and only one H1 tag, then the next MUST be an H2 (as many as you need) and so on. I'd replace the H4 with an H3 and adjust the styling to suit, then re-run the report and see how many errors are cleared.

    In this case, there is really no position for an H1, so I'd probably live with the last errors.

    See here and here for some discussion on Semantic HTML

    Marked as helpful
    0
  • Grant Ramsay•280
    @seapaganPosted over 2 years ago

    Your solution looks good and is responsive; well done 😀

    If you look at the report, you have two accessibility issues which are caused by not following Semantic HTML best practices.

    See here and here for descriptions of the relevant tags.

    In this case, you can change the div on line 12 for a main (and the closing tag); this will clear those issues.

    It is important these days to follow Semantic HTML as it helps screen readers and other accessibility aids.

    0
  • Grant Ramsay•280
    @seapaganPosted over 2 years ago

    Looks great, well done :)

    One thing to look out for is that you would not see new advice in Firefox, and the button seems to do nothing because Firefox caches the response. To fix this, add {cache: 'no-store'} to your fetch command like so :

    fetch("https://api.adviceslip.com/advice",{cache: 'no-store'})

    Also, perhaps remove the original placeholder text from your HTML in the 'advice' h2?- On the first load, you sometimes see a flash of the placeholder before the API returns the new Advice fragment. You can't leave H2 empty, though, as it may be tagged in the report; maybe put a space or a period?

    Marked as helpful
    0
  • Isaac C Anyim•210
    @CreatorLZSubmitted over 2 years ago

    I've got no clue on how to use fetch api. previously, i had only used axios to make server requests and could not employ it in this project. i had to improvise and convert the data.json file to data.js and map through its content.

    React.js, styled-components, javascript

    1
    Grant Ramsay•280
    @seapaganPosted over 2 years ago

    Using fetch to get a local JSON file is not so complicated; just remember it returns a promise, so you should await it and then convert it back to JSON. For the provided file it can be done in one line :

    const data = await fetch("data.json").then((res) => res.json());

    Then just iterate over the data object using a forEach or similar. You may need to specify a path for the JSON file depending on where you put it in relation to your component.

    Marked as helpful
    1
  • Amna Arif•40
    @aminaArif22Submitted over 2 years ago

    for dark mode toggler, I used CSS variables and changed the value of those variables using JavaScript when clicked. I could only think of this solution. If there is a better approach as compared to this please let me know.

    responsive-social-media-dashboard using CSS grid

    2
    Grant Ramsay•280
    @seapaganPosted over 2 years ago

    A simpler way to do the toggler is :

    1. Set up 2 CSS classes, eg '.theme-dark' and '.theme-light', each containing all the correct variables. Both classes should have the same variable names but different colour values.
    2. Apply the class for your default colour choice directly to the Body tag.
    3. On toggle, your Javascript only needs to swap these 2 classes!

    See my CSS here and the first section of the related JS here

    Marked as helpful
    2