Wikipedia viewer, finally done


#1

After life, procrastination, computer crashes, more life and more procrastination I’ve finally finished the Wiki viewer https://codepen.io/KiuShin/full/pLMPvr/
This is my first time actually posting something for feedback, I need to do better, so this is my attempt to get back on that coding horse and ride in into a new job.
Tell me what you think.


#2

Hi!

Good job :slight_smile:

Few things I would change:

  1. Make the background image smaller in size, cause it loads very slowly.
  2. Make the link in the search results open in a new window. This way you can go back to the search by closing the new window, otherwise you have to search again to continue in the same list of results.
  3. Make it clear that the Wikipedia globe is a link for a random article. It’s not very clear.

Happy coding!


#3

Thanks, i’ll be sure to fix this up.


#4

Looks very nice! Aside from echoing what @SpaniardDev mentioned, I’d also recommend making the search button more obvious with a text caption. And even if you don’t use text captions for images, it’s essential for accessibility and SEO that you give them an alt attribute explaining what they are (if they have no function or meaning and are purely decorative, it can be set to the empty string "").

The topic titles/links are also a little difficult to read — I’d suggest using either a bolder font, a different text color, or a brighter text shadow.

Also, it’s great that you made sure to have the Enter key submit the search form — you’d be surprised how many people forget to include this essential functionality. However, simulating a click event on the search button isn’t the best way to do this. Clicks can have other unexpected side effects, and simulated clicks have the isTrusted property set to false, so they don’t work quite the same as real clicks in any case.

Instead, you can do either or both of the following:

  • Break out the the event handler into a named function, and call that function as the handler of both events.
  • Wrap the search bar and button in a <form> element, change the type of the <input> button to submit, and have the handler fire on the submit event of the form.

#5

Thanks for the advice, and didn’t think about the SEO and alt attribute I’ll have to keep that in mind from now on. :smiley: