Developing the exercise further


#1

So, I've finished this exercise but I would like develop further in this to learn better, I am a total newbie btw.
So i've came with questions; In this exercise you finish it with the ability to:

  • Click on an article to open the description of it (only open,clicking again won't close it).
  • Clicking on an different article when you already have one open closes the previous and opens the current one
  • Pressing the "O" key let's you open the article, and different from clicking let's you close it by pressing "O" again, but opening a different article with the key won't close the others as if clicking does.
  • Pressing the "N" key let's you select the next article

I would like to add some of the points that i told were missing:

  • Make clicking again on a open article close it
  • Make opening a new article with the key close the previous ones as if clicking
  • Add a previous article button

I've made my tries, but not really succeeded in anything.

I'll post my modfied code for the sake of explaining what i've tried, it might be really bad in a perspective of a more advanced programmer, but well, bear with me, I tried .-.

var main = function() {

 $('.article').click(function() {
     $('.article').removeClass('current');
     $('.description').hide();

     $(this).addClass('current');
     $(this).children('.description').show();





 });
$(document).keypress(function(event) {
    if (event.which === 13)  {                 //ENTER KEY

    $('.current').children('.description').toggle();
    }    





    else if (event.which === 40)   {       // ↓ KEY
      var currentArticle = $('.current');
      var nextArticle = currentArticle.next();

      currentArticle.removeClass('current');
      nextArticle.addClass('current');

    }

     if (event.which === 38) {        // ↑ KEY
     var previousArticle = currentArticle.previous();   

     currentArticle.removeClass('current');
     previousArticle.addClass('current');

    }



});

};

$(document).ready(main);

You can see i've changed the keys for opening an article to 'enter' and next article to 'down arrow'

I've tried to make the description close by changing this line

$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();

     $(this).addClass('current');
     $(this).children('.description').show();

To this:

$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();

    $(this).addClass('current');
    $(this).children('.description').toggle();

And you can see my failed attempts on creating the previous key there.

If any of you could give advice on making this it would be appreciated :slightly_smiling:


#2

@bigorados,
Have a read through
https://www.codecademy.com/forum_questions/55df55ec93767692e90002c1
and
http://discuss.codecademy.com/t/help-me-on-o-shortcut/25483/2?u=leonhard.wettengmx.n