Feedback please on my wikipedia app challenge please

Feedback please on my wikipedia app challenge please
0

#1

My wikipedia app is here https://codepen.io/orinocoelm/full/vJdwjv/
Thank you in advance for any feedback.


#2

It does not work for me. I get the following two errors in the console:

jquery.min.js:4 Mixed Content: The page at ‘https://codepen.io/orinocoelm/full/vJdwjv/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=bee&srlimit=10&format=json&origin=*’. This request has been blocked; the content must be served over HTTPS.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
getWikiArts @ pen.js:24
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
pen.js:40

error: status 0 response error


#3

Strange, which browser are you using?


#4

Latest version of Chrome on Windows 10. What is your browser and are you viewing the Codepen that you posted the link for or an offline project?


#5

Same as me. I can’t see where the problem lies? do you have https in the browser address bar?


#6

I changed the ajax call to use https, maybe that will solve the problem?


#7

All Codepen pens run with https now. Changing your http: to https: “should” solve the error you are seeing.


#8

Looks like you got your project working now. A few suggestions:

  1. The description section would look better if it was not underlined (try text-decoration:none;)

  2. See if you can make the entire container clickable instead of just the text in the container

  3. Pushing the Enter key should be an option to also run the search


#9

Good, I think there is another bug in that once the search button is clicked, it doesn’t respond if another search term is requested. I think it maybe due to the tooltip?


#10
  • I’ve turned the underline off.

  • I’ve made the clickable area larger (not the whole of the div but the majority of the area except for the padding).

  • Enter now triggers the search.

  • I was mistaken about the search button, it was appending to the end but I was too dumb to realise. Now it clears the previous results before displaying new results.

  • The CSS does the job but it’s a bit dull.


#11

Much better! The functionality is there, so my next 3 suggestions are strictly visual design suggestions:

#1) When the screen width gets a little smaller, I think it would look better if both buttons were in the same container, so they both would move below the search box to prevent the following.

#2) I also would center the buttons when they move underneath the search box.

#3) Maybe put some a little space between the buttons and space between the search box and the buttons. It looks a little crowded currently.

#4) Put target="_blank" in your <a> tags for the links to the Wikipedia articles, so your page is still available if they close out the Wikipedia page.