So I am trying to implement my Wiki Viewer using ReactJS and the Fetch API. I have looked at several videos to learn how to implement the Fetch API in Codepen, but for some reason fetch request is not returning any data. Attached is my pen. Please let me know what I am doing wrong.
Any help is welcomed!
I would suggest wrapping the search bar and button in a form, or adding an eventListener to get when the enter key is pressed. Also since clicking on both the title and the snippet of a wikipedia article lead to the same page consider highlighting both when a user hovers over the div containing them.
Looks good! When the search appears my eye is drawn to the bottom half of the page. I’d suggest moving the link in the title somewhere in the lower half.
How did you use the fetch() call without the Fetch API in your JS external scripts? I am trying to implement my Wikipedia Viewer using React and the Fetch API, but I have yet to get it to work.
Haven’t gotten into React yet, however if you’re using firefox or chrome and it’s up to date you should be able to use fetch without any external scripts. You can use this site to check which browsers support different features.
It looks good but there some nit-picky design comments I could suggest.
For one, your cards go to the exact bottom of the page. Consider adding some bottom margin here or a footer to create some space between the bottom of the page and your last search result.
Also, your animation for sliding in the results takes a long time. I’d consider shortening the duration (in CSS this is -webkit-animation-duration if your using animate.css).