Let's discuss your "Wikipedia Viewer"

Project Link - https://codepen.io/Hartecode/full/EwVeQa/

1 Like

Project Link - https://codepen.io/ah-med/full/gGpVgX/

3 Likes

Project Link - https://codepen.io/prokop/full/XemEdZ/
i think i couldā€™ve used better colors but still im happy with what i did
any criticism is very welcome

1 Like

@Hartecode looks good. I would just add some padding to the entries because the words are so close to the border it would just look better with some space.

@rusakkk I like the look of your wiki viewer. It just took me a second to notice the results came up once I entered my search. Idk if it would be better to move up the search bar so people can see the results easier but either way looks good.

Hereā€™s mine : https://codepen.io/tchbell/full/eGZaZa/

1 Like

Hi,

here is my Wikipedia Viewer: https://codepen.io/sarcino/full/PJGMEo/

Happy coding!

Hello guys, just finished my wikipedia viewer.
Your feedback would be much appreciated. Thanks!

@tchbell thanks for your feedback, Iā€™ll improve my project. I like yours project too. :grinning: Hover transitions are the best what I ever seen :+1:

Hereā€™s a link to my project.

Love the fade-in when the results appear! I had to apply my own after seeing yours. :grin:

1 Like

Very nice design, very colorful! :+1:

1 Like

Project Link -https://codepen.io/zapbampow/full/NavoRe/

Just finished up my Wikipedia Viewer. Iā€™m mostly happy with it. I wanted to have images come up with the search results. I played around a bunch with the API and this was the best I could do. Some results have images. So donā€™t. Otherwise, Iā€™m happy with the work I did and feel good about my growing confidence.

Here is my Wikipedia viewer :slight_smile:

https://codepen.io/alittleredpanda/full/xXgdvv/


This islink to my wikipedia viewer . Tried to keep it a bit simple . Would welcome suggestions or corrections .

Please watch mine and give me more opinions :blush:

Not trying to make it look pretty, just recently got into React and want to practice.

Live: http://ncaron.github.io/wikipedia-viewer/
Code: https://github.com/ncaron/wikipedia-viewer

Thus far Iā€™ve got the page titles and snippets, along with the page ID (and hence URLs) - in other words, challenge complete! But the imagesā€¦ I want images!

I know there is an option using a single JSON (providing title, short description and thumbnail), but I was hoping to get the text snippet, and from the looks of it, it canā€™t be done with a single JSON request.

The image JSON URL requires the page title, so I made an array of titles, then looped through them to get an array of images (as confirmed by console.log). BUT if I loop through that array to actually create the images ("<img src='" + imgs[i] + "'>"), the src content shows as undefined.

Why is this? Iā€™m guessing itā€™s that the JSON value looks like a String, but isnā€™tā€¦ Yet I canā€™t work out how to get it right. Stringify does nothingā€¦

function searchWiki() {
  var titles = [];
  var imgs = [];
  var input = document.getElementById("searchTerm").value;
  var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + input + "&srprop=snippet&callback=?";
  $.getJSON(url, function(data) {
    var pages = data.query.search;
    for (var i = 0; i < 10; i++) {
    	titles.push(pages[i].title);
    	var url2 = "https://en.wikipedia.org/w/api.php?action=query&format=json&titles=" + titles[i] + "&prop=imageinfo&iiprop=url&generator=images&callback=?"
    	$.getJSON(url2, function(data2) {
    		imgs.push(data2.query.pages["-1"].imageinfo[0].url);
    	});
    }
    console.log(imgs);
   });
}

My React Wikipedia Viewer

Project => https://jolav.me/freecodecamp/old/front-end/wiki/wiki.html

I built it using React.js

Wikipedia Viewer
Github

Project Link - https://wikipedia-viewer-knowledgehole.glitch.me/

1 Like

Project Link - https://codepen.io/Summerflower/full/GMYPwr/