Gvantsa• 210
@iragvantsa
Submitted
P
Grant Ramsay
@seapagan
All comments
- PGrant Ramsay• 280
@seapagan
Posted
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
maintag around your main content is one way you can help - I'd replace thedivon line 20 with a<main>tag like so :<main class="grid-container">Remember to change the closing tag too!
Also,
H1,H2etc. 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 oneH1tag, then the next MUST be anH2(as many as you need) and so on. I'd replace theH4with anH3and 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.
Marked as helpful
0 - Vincenzo• 90
@Vincenzo-Git-hub
Submitted
Please provide feedback
PGrant Ramsay• 280@seapagan
Posted
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
divon line 12 for amain(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 - Sam• 230
@samd1a
Submitted
PGrant Ramsay• 280@seapagan
Posted
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
@CreatorLZ
Submitted
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.
PGrant Ramsay• 280@seapagan
Posted
Using fetch to get a local JSON file is not so complicated; just remember it returns a promise, so you should
awaitit 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
forEachor 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
@aminaArif22
Submitted
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.
PGrant Ramsay• 280@seapagan
Posted
A simpler way to do the toggler is :
- 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.
- Apply the class for your default colour choice directly to the Body tag.
- 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
