Wikipoogle - The google like wikipedia search project

Code Feedback
1

Hello all,

I am having an awesome time building these front end projects. If you have been following along on my progress you have seen a few unique things I have thrown together for the FCC projects. I think I am most excited about this project.

I wanted to create the Wikipedia viewer slightly different and push my ability further so I can learn. I wanted to create a google like search for wikipedia that has the same functionality as the real google site (responsiveness, design, menu animations, etc.).

I named the project Wikipoogle, which if you say it fast enough sounds like you are saying “poodle”, which I kind of liked, so I implemented that into my logo I made.

Anyway here’s the link: Wikipoogle

What I used for this project:

  1. Font Awesome - for icons
  2. Yantramanav font from Google
  3. Google color scheme
  4. Adobe Illustrator for vector format logo

That’s pretty much it. If you have any feedback I would be happy to hear it, and thanks for checking it out!
Don’t forget to follow me : )

6 Likes
2

You only need the auto complete part for that search. :sunglasses: like it a lot :+1:

1 Like
3

Nice… hahaha. I created something similar, but called mine “Wikigle”
https://randomquote-owel.surge.sh/

Comments:
I entered the phrase “card reader” in your Wikipoogle and the last 6 items of your search results returned “undefined/undefined/undefined” .

If you type “card reader” in my Wikigle, my results are different.

Maybe you have a slight mistake processing/parsing the returned JSON from Wikipedia that’s why you’re getting “undefined” results?

4

@DanielJBailey yes as @owel said and if i remember right when searching multiple words you need to join them by %. As in the example provided by @owel the “card reader” should be “card%reader”

2 Likes
5

Oh ok. Will remove any whitespace from the inputed string. Thanks!!

6

Nice idea, name and theme. Happy coding!

1 Like
7

Thanks for the feedback Nadeem

1 Like
8

When I type “card reader” into yours, most of the results don’t seem to have much to do with card readers. Is it searching both of the words separately?

I certainly wouldn’t recommend doing that, otherwise you’d end up making your users search for cardreader when they meant card reader. I don’t think the problem is to do with lack of URL encoding, anyway — it seems to be because the API call is returning <10 results.

It looks like there are a million different ways to configure the Wikimedia API. Personally, I found my way got pretty good results (GitHub | pages), though it’s nowhere near as nicely designed as yours or Owel’s.

1 Like
9

Yea I’m not really sure what to do because If i type “cardreader” into my search as if I removed the white space it still gives me the same results. I am just going to try and write a better if statement to hide the results if they are undefined.

10

Hint: try the array map method :wink:

1 Like
11

yea that’s true I could use that. I just applied my simple fix and it seems to work. No more undefined answers

if (data[1][i] === undefined) {
	//do nothing and skip over this answer
} else {
      //run normal code
}
12

I fixed it with a simple if check statement in my code that populates the results. Check it ^

@sorinr @owel

1 Like
13

No, I’m sending the whole thing in the text box to wikipedia.

    $.ajax({
        method: "GET",
        url: "https://en.wikipedia.org/w/api.php",
        data: {
            format: "json",
            action: "query",
            generator: "search",
            gsrlimit: "100",
            prop: "pageimages|extracts",
            pilimit: "20",
            exintro: "5",
            explaintext: "4",
            exsentences: "4",
            exlimit: "max",
            origin: "*",
            gsrsearch: myapp.wikiKeyword
        }

Sorry to derail your post Daniel.

1 Like
14

Yea I had the code in there at one point but need to work on the API because I think it is too slow to perform that task. I think the only reason it works for google is because they have the backdoor data of searches they use to populate the auto complete. It is the only thing I am missing though haha.

15

Test this one and let me if its slow.

1 Like
16

@DanielJBailey I would like to suggested a simple UI improvement. When a user presses on the “I am feeling lucky” button instead of opening a new tab, do the following.

  • Display a card with the title, link, and a short description of the article.
  • On repeat click update the card’s info.
  • The card can be the width of the search box
1 Like