The O Shortcut: I passed it, yet it doesn't make sense


#1

So I just got done passing it by using this method:

var main = function() {
$('.article').click(function() {
$('.description').hide();
$(this).children('.description').show();
$(this).addClass('current');
$('.description').hide();
$('.article').removeClass('current');
});
$(document).keypress(function(event) {
if (event.which === 111) {
$('.current').children('.description').toggle();
}
});
};

$(document).ready(main);

But here is the catch: it doesn't make any sense. When I opened the 'example' page so I can hit keyword 'o', NOTHING happened, and yet for some reason it gave me the green light (passing). Can someone please explain to me why I'm being passed through even though the goal was to make this 'example' page work by pressing the key 'o'? Is there something I am missing? Please and Thank you.


#2

As you used the document in your jQuery-Selector,
you will have to =click= in the pre-view-screen,
therewith you have put the document =on-focus=.

As the document is =on-focus= your "o"-keyboard-key will get interpreted...
and the description is shown/hidden....

==========================

++++ DOM representation Interactive Website +++++++++++
As a starter, I took the index.html apart...
This is a Document Object Model representation
The numbers are the line-numbers where the Tag can be found...
So we have a 76-div which in this diagram has the class attribute current
I will use this diagram as reference in the explanation in separate Post's

                   html
                    |
      + - - - - - - + - - - - - -+
      |                          |
      3                          7
     head                       body
      |                          |
  + - + - +          + - - - - - + - - - - - - +
  |       |          |           |             |
  4       5          8          165           166
 link    link       div        script        script
                 .articles
                 .container
                     |
 + - - - + - - - + - + - + - - - + - - - + - - - +
 |       |       |       |       |       |       |
 10      32      54      76      98     120     142
 div     div     div     div     div    div     div  < .article
                      .current                     sibling's  
                          |                          .next()
           +- - - - - - - + - - - - - - - - +
           |                                |
           77                               88
          .item                        .description
           div                              div
            |                                |
  + - - - - + - - - -+           + - - - - - + - - - - -+
  |         |        |           |           |          |
  78        81       84          89          90         94
  div       div      div         div         div        div
                                              |
                                      + - - - + - - - +
                                      |               |
                                      h1              p

By using the description-class in the jQuery selector $('.description')
you will create a jQuery object which has 7 properties
which are the 7 div Element's that have the class="description" set.
We hide them all by using:
$('.description').hide();

So we have a 76-div which in this diagram has the class attribute current
By using the current-class in the jQuery selector, $(".current")
you will create a jQuery object which has 2 Children
being the 77-div and the 88-div,
these can be targeted by using their ".item" or ".description" class-attribute
$('.current').children('.description').show();

In this diagram you see that the 8-div has 7 Children,
These Children are Siblings to each other,

   8-div - - - - -+
                  | /7-Children/
        .article  + 10-div [first-child]
                  |
        .article  + 32-div    As these div's are
                  |           'siblings' of each-other
                  |           we can use the
                  |           .prev() and .next() methods
                  |                           to navigate
        .article  + 54-div [prev]
                  |
        .article  + 76-div class="current"  - +/2children/
                  |                           + 77-div .item
        .article  + 98-div [next]             |
                  |                           + 88-div .description
        .article  +120-div                    
                  |
        .article  +142-div [last-child]

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

The IF ELSE-IF-statement must be read as:
The IF-verb,
its condition in parenthesis ( )
and a code-block encapsulated in opening & closing curly-brackets-{ }

if ( condition1 ) {
// this code which will be executed IF CONDITION1 is TRUE
}

Now if condition1 rendered to false the if { code-block} is NOT executed
and if the JavaScript-parser finds an ELSE-IF-statement
it will start to evaluate that statement,
with it's condition2
and if this condition2 renders to true,
the { code-block } will be executed.

if ( condition1 ) {
     // this code which will be executed IF CONDITION1 is TRUE
}
else if ( condition2 ) {
        // condition1 ran into a -false-
        // this code which will be executed IF CONDITION2 is TRUE
}

Now encapsulated within the keypress Event-handler
as its function-body

$(document).keypress( function(event) {
    if ( condition1 ) {
        // this code which will be executed IF CONDITION1 is TRUE
    }
    else if ( condition2 ) {
       // condition1 ran into a -false-
       // this code which will be executed IF CONDITION2 is TRUE
    }
  });

++++++++++++++++++++++++++++++++++++

As a function of the keypress Event-handler we are going to evaluate
the object which we get as a return value in the variable event.
_( An object has one or more properties
Each property consists of a property-key and it's associated VALUE )_

If we write event.which
we are reading the associated VALUE of the which property-key.
We are using the Decimal column of the table
http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx
( arrow left-37 up-38 right-39 down-40 )
and we see that the letter o is represented with the Decimal value 111

if ( event.which === 111 ) {
// if you have made the preview-screen on-focus by clicking in the 'green'
// and you have pressed the o-keyboard-key
// the "description" will be shown
// of the article which is carrying the Class-attribute 'current'.
} herewith we close the if code-block

if ( event.which === 111 ) {
   $('.current').children('.description').toggle();
   // replace .toggle() with .show()
}

Now if didn't press the o key but for instance the n-keyboard-key
(looking in the Decimal column we see the VALUE 110)
Now we are entering the ELSE-IF
else if ( event.which === 110) {
// we are going to capture the jQuery object which we get
// as return VALUE of using the jQuery-Selector $('.current')
// var currentArticle = $('.current');

// as all articles are Siblings to each other,
// we can use the next() Method
// to orientate ourselves on the next 'article'
// and capture the returned jQuery Object
//we assign this returned jQuery Object to its own variable
// var nextArticle = currentArticle.next();

// now want to remove the Class-attribute 'current' from the currentArticle
// currentArticle.removeClass('current');
// we want the next-'article' to carry this Class-attribute 'current' by addClass
//**nextArticle.addClass('current');**
// you will see the current'article' will lose it's highlight
// and the next'article' will be highlighted.
} we close the ELSE-IF statement !!

  $(document).keypress(function(event) {
     // if the "o" keyboard-key is pressed
     if ( event.which === 111 ) {
       $('.current').children('.description').toggle()
     }
     // if the "n" keyboard-key is pressed
     else if ( event.which === 110 ) {
       var currentArticle = $('.current');
       var nextArticle = currentArticle.next();
       // swap the Class-attribute 'current'
       currentArticle.removeClass('current');  //it loses highlight
       nextArticle.addClass('current');  // it is highlighted
     }
     // if the "a" keyboard-key is pressed.
     else if ( event.which = 97 ) {
        $('.item').toggle();
        $('.description').toggle();
     }
    });

#3

Thank you so much, it helped me a lot. It still doesn't make any sense with this item, but with your help it runs, so... THANKS.