Wikipedia Viewer Feedback/suggestions

Code Feedback
1

:https://codepen.io/pkpraveen603/full/qXXgeb/
Tried to keep it a little simple .
I would like to welcome all the suggestions / corrections .

3

I actually tried that (using $(‘form’).submit(function() {} ) but for some reason that page just reloads itself after a couple of seconds and all the data is lost , returning the page back to its initial form . (If you see it in editors view you can actually see that being commented out https://codepen.io/pkpraveen603/pen/qXXgeb?editors=1010 ). I would myself want to achieve that . Any suggestions on how to do it?

4

Review a documentation on the form tag. I believe by default it wants to send information and reset the form when a button is clicked. You could remove the <form> tag altogether and replace it with a simple input / button combo

<input type="text" placeholder="Search term!">
<button>Search!</button>

And then you could just attach one to the other

$(button).on('click', function() {
    // RUN SEARCH FUNCTION HERE
}
$(body).on('keydown', function(event) {
    if (event.which === 13) {
        // RUN SEARCH FUNCTION HERE
    }
}

Or if you want to keep your code, there might be able to implement an event.preventDefault() method, although I’m not too familiar with forms so I don’t know how that would work

5

By the way, I wanted to mention a couple of design issues. Check out the mobile version.

  • The the links will overflow outside of the div
  • The Search Random article span is not centered
  • The same span is also partially covered by the footer element

And a problem with all versions

  • The search button doesn’t line up smoothly with the input
  • The footer isn’t flush with the left side of the screen

Just looking over your JS code reminds me how difficult it was for me to navigate the Wiki API Docs. Overall, the search functionality works, just try to implement “search when user hits enter” and the design flaws and this project will shine.

6

Thanks very much(especially for the keydown event listener events) . I’ve tried to fix all of those issues https://codepen.io/pkpraveen603/full/qXXgeb/ (except some positioning/centering issues for all screens). But still one doubt : I want to use both on click and keydown event listeners , without actually typing the same anonymous function for both events(or copying ) just to make the js code look more compact or maybe smaller https://codepen.io/pkpraveen603/pen/qXXgeb?editors=1010 .

7

Name the function and run it if the event occurs

function myFunc() {
    // do some ajax
}

$(button).on(click, myFunc)
$(body).on(keydown, function(event) {
    if (event.which === 13) {
        myFunc()
    }
})