Questions about improving the code for the News Reader challenge


#1



https://www.codecademy.com/courses/web-beginner-en-4hxyb/0/10?content_from=make-an-interactive-website%3Ajquery-events


Hi. I have no problem with completing the News Reader challenge and the code works fine for me. I enjoyed the challenge so much that I decided to go ahead and modify it a bit. What I wanted to do was implementing the option to navigating not only to the next article but also to the previous one. It worked fine for me either as long as I used letter keys, that is, I used 'n' key to navigate to the next article and 'p' key for the previous article.
Inspired by success, I thought of replacing 'n' and 'p' with 'down' and 'up' arrow keys. I reasoned it would make more sense using arrows instead of letter keys. I googled the key codes for the up and down arrows (38 and 40 respectively). However, when I used those, the code didn't work.

I tried to fix it by using 'event.preventDefault();', but obviously it didn't help. Can you tell me what I am doing wrong? Whad do I do to enable navigation to the next/prev article through pressing the up and down arrow keys?


var main = function() {
    
    $('.article').click(function() {
        $('.article').removeClass('current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
        });
        
        $(document).keypress(function(event) {
            console.log(event.which);
            if (event.which === 111) {
                $('.current').children('.description').toggle();
                }
                else if (event.which === 110) {
                    event.preventDefault();
                    var $currentArticle = $('.current');
                    var $nextArticle = $currentArticle.next();
                    $currentArticle.removeClass('current');
                    $nextArticle.addClass('current');
                } else if (event.which === 112) {
                    event.preventDefault();
                    var $currentArticle = $('.current');
                    var $prevArticle = $currentArticle.prev();
                    $currentArticle.removeClass('current');
                    $prevArticle.addClass('current');
                }
            });
};
$(document).ready(main);

Thanks!


#2

Hey @javaninja76078,

Good job! Implementing a previous key was a great idea :slight_smile:

Try event.keyCode for the keyboard shortcuts. I'm not sure why event.which isn't working, but it seems like event.which works only for letters, and event.keyCode works only on the other keys such as the arrow keys. There may be something written online that will explain this for us. If I find anything on the subject, I'll update here.


#3

Hi, zystvan!

Thanks for the quick reply. I also appreciate your kind words! :slight_smile:
I did try event.keyCode. It didn't work. Sorry, I should have mentioned that in the post.
What I also tried was logging out the pressed keys to console (console.log(event.which)) to see if the browser intercepts the keys I press. And you know what? It detected only alphanumeric keys! It didn't respond at all to my pressing control keys (etc. Pause, Insert, Home, Delete..) cursor keys (all four types of arrow keys) and numeric keys (those on the right).
I'm sure there is a way to access keys from other keyboard sections. We need to find it! :wink:


#4

@javaninja76078 Yeah, I saw your console.log line :slight_smile: So logging out event.keyCode still gave you 0? It worked for me, but only on keys that were something other than a letter.


#5

On my end event.keyCode works for both alphanumeric and numeric keys, provided the NumLock is activated. When I disable NumLock, it doesn't log out anything (not even 0). Nothing happens in console when I press the arrow keys either.


#6

I've got the solution!

It turns out that the KeyPress event is not raised by noncharacter keys; however, the noncharacter keys do raise the KeyDown and KeyUp events. So I replaced

$(document).keypress(function(event)

with

$(document).keydown(function(event)

However, now the 'O' key has stopped working)))
I'll keep diggin' though :wink:


#7

Got it!

I don't know why but with the .keydown method for the 'O' you need to use 79 (not 111). :slight_smile:


#8

@javaninja76078 Great job! Let me know if I can help you any more :slight_smile:

This Stack Overflow answer may have some information for you about keyCode and which:


#9

A couple more modifications:

  • now the article description shows/hides on hitting the Enter key (makes more sense to me :));
  • the gray background now remains for the first and last articles on the list even if you keep hitting the arrow keys;

Here is the final code:

var main = function() {
    
    $('.article').click(function() {
        $('.article').removeClass('current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
        });
        
        $(document).keydown(function(event) {
            // hides/shows article descripton on hitting the enter key.
            if (event.which === 13) {
                $('.current').children('.description').toggle();
            }
            
            // adds/removes the .current class
            // doesn't allow to remove the .current class for the first and last articles.
                else if (event.which === 40) {
                    var $currentArticle = $('.current');
                    if ($currentArticle.next()[0] !== undefined) {
                        var $nextArticle = $currentArticle.next();
                        $currentArticle.removeClass('current');
                        $nextArticle.addClass('current');
                        
                    }
                } else if (event.which === 38) {
                    var $currentArticle = $('.current');
                    if ($currentArticle.prev()[0] !== undefined) {
                    var $prevArticle = $currentArticle.prev();
                    $currentArticle.removeClass('current');
                    $prevArticle.addClass('current');
                    }
                }
            });
};
$(document).ready(main);

#11

Thanks, zystvan!

Yeah, based on this article it appears it is safer to use which when using jQuery.
Thanks again! Really appreciate your help!


#12

@javaninja76078 Great job! Sorry I couldn't help you more, but it looks like you were able to figure most of it out by yourself :slight_smile:

Have fun with the rest of the course!


#13

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.