Let's discuss your "Wikipedia Viewer"

Hello Everyone!

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!

Was not super imaginative and tried to make as best of a copy of the example app. Need to read up on CSS.

Project link: https://codepen.io/filipBan/pen/rwPRpy

Hey huys,

What do you think about my Wikipedia Viewer?

Link - https://codepen.io/hollowsamff/full/VWNxJJ/
Any feedback would be appreciated

1 Like

Here is my project link - https://codepen.io/b-abhijit/full/RgOXjd/

here is my project, hope you like it

https://wiki-search.glitch.me/

1 Like

Project Link - https://codepen.io/Matthew_Keating/full/mwoQRL/
Feedback and criticism welcome.

I like the the background and border colors.

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.

I have implemented your suggestion.
Thank you for the feedback.

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.

http://caniuse.com/#feat=fetch

Post a link and I’ll see if I can help.

Project Link - https://codepen.io/dsschapira/full/vZVMpZ/

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).

Otherwise, it overall looks great!

Project Link - [REDACTED]

2 Likes

Project Link - https://codepen.io/grahamstewart/full/EvxdRm/
I didn’t spend time worrying about colours on this one

nice bunch of API features. you got deep into it.

Project Link - https://codepen.io/robertmaples/full/NvWydm/

Any and all advice is welcome. Thanks!

Project Link- https://codepen.io/doubleUTF/pen/ZJzaeo

Edit: never mind, wrong place.