Need help with Wikipedia Viewer

Code Feedback
1

Hi,

So I’ve been trying to solve this for about a month now and I’m progressing nowhere so I’m posting my question here.

For some reason, I got 2 errors, and it’s related to CORS. I’ve already added the callback=? at the end of the JSON URL but doesn’t seem to work.

I’m also not using getJSON cause I’m trying to learn vanilla JavaScript instead of jQuery.

Here’s the code pen link

Thanks

2

To solve problem with CORS, add &origin=* to URL and remove the callback part.
Use link instead of form+button for random article.

3

Hi, so that worked in removing the CORS issue, but why do I see some solution requires adding the callback part to work?

Also, can you point out some direction on:

  1. What do I do if the search result doesn’t have any valid result? I’ve tried searching Pokemon and it returns this JSON data https://en.wikipedia.org/w/api.php?action=query&titles=pokemon&prop=revisions&rvprop=content&format=jsonfm&origin=*

  2. Also, I tried Number and I ended up with this long JSON data https://en.wikipedia.org/w/api.php?action=query&titles=number&prop=revisions&rvprop=content&format=jsonfm&origin=*
    So my question is, how should I interpret this data? How should I approach this?

Thanks for the tip, but any reason why a link is better instead of form+button for random article?

Thanks again and I updated my CodePen so it fixes the CORS issue!

4

Callback parameter is needed when you use JSONP to circumvent limitations of cross origin request.

Format of your API call is wrong. Proper URL is
https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=Pokemon&format=jsonfm&origin=*

Forms are designed to send data.
There are several downsides when using forms instead of links. User experience, SEO, accessibility and a lot more code.

5

Thanks and I’ve updated my codepen, seems that it now works per requirement? Can you verify that?

If all okay, guess the only thing I left to do is to ensure that the search result items are clickable so it will bring to its wiki page and I’ll start working on the styling?

6

Looks good, just add target="_blank" to links. It will open them in new tab instead of inside codepen.
Yes, make results titles clickable.

7

Hi,

So I’ve updated my code and I got it almost to what I wanted, except I have a few questions:

  1. As per in my JavaScript:

    window.onscroll = function () {
    //TODO: is there a cleaner way then having to define 2 of this, so it'll work on Chrome and Safari?
    if (document.documentElement.scrollTop >= 20 || document.body.scrollTop >= 20) {
        searchInputStyle.boxShadow = "0 5px 12px #888";
    } else {
        searchInputStyle.boxShadow = "none";
    }
}

    The issue is, I need to define both document.documentElement and document.body in order for scrollTop to work in both Chrome and Safari.

  2. Any pointers on how do I make my element animate in such a way that when I press search, the user is able to see the Wikipedia, Search Box, Buttons elements move to the top of the page and expand accordingly (currently it sorta does the end of this upon pressing search)

  3. Is it possible to receive more than 10 search results? How?

  4. I noticed a delay upon displaying the search result, why is that and is it possible to be fixed?

  5. How do we debug sites on mobile cause I have this issue

    IMG_4323
    IMG_4323750×1194 219 KB

    Notice how the search box has rounded edges, I tried adding border-radius: 0 and even tried a few “fixes” from SO but it doesn’t seem to work. And I noticed the search button is stuck on the hover state unless I click on the text box again. Any idea why and how do I fix it?

And feel free to comment on any other part of my code :smiley:

Thanks!