Wikipedia Viewer - Feedback appreciated! :D

Hoping I can get some constructive criticism on my project. Thanks for taking a look! :tada:
Wiki-Viewer

1 Like

Nice. Very simple and functional. I like the object-oriented approach in your JS as well, makes the code readable and understandable. Good job!

2 Likes

Thank you! Appreciate you taking the time to check out the code

Looks good! A few things you might want to think about are:

  1. Accessibility. When I tab through using chrome the search button doesn’t have an outline on it in a focused state. I end up getting lost on the page. Focused states help those with disabilities that may use tabbed navigation (missing limbs, arthritis, etc.) to know where they are on the page. Additionally, a cursor property of pointer let’s me know the button is interactive and helps reinforce the hover state.

  2. The paragraph tag is probably unnecessary within your random link and semantically probably doesn’t represent a paragraph.

  3. The error message could probably be more descriptive. Rather than stating that the query doesn’t make sense, it might benefit users to to know that no results were found instead. They could very well be searching for a query that makes sense, but an article just doesn’t exist.

  4. Semantically the b tag could be replaced with a strong tag instead or better yet could be changed using the font-weight property within your CSS file.

  5. Information architecture. When I see the first item, it’s not apparent that it exists to add context the items below it. It may be helpful to style the first item differently.

1 Like

Thank you! I’ll definitely go back in and work on implementing these suggestions, these are all super important things I forgot to consider

I went ahead and implemented focus states for everything and removed the semantically-incorrect p.

As for the info architecture, some terms don’t have a summary blurb that the API sends back - the array item is just an empty string. The link still goes to its own Wikipedia entry, which is distinct from the other results. I think that’s what you’re referring to when you mentioned that one of the items is blank.

I’m going to write some code that pulls a section from the article in the case of the API sending back one of those empty strings.

Thanks again for your helpful response! :+1:

Most of it can be fixed by adding &redirects=resolve to your URL so if an articles is being redirected, the api will follow the redirect automatically (you can test it by searching “dgs” with or without the redirects param).