The o shortcut


#1

Please help with this:

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===111) {
$('.current').children('.description').toggle();
}
});
}

what's wrong?
Thank's!


#2

https://www.codecademy.com/courses/web-beginner-en-4hxyb/0/7

The only thing i can see,
is you forgot a
$(document).ready(main);

PS.
Before the "o"-key can be used
you will have to =click= in the Preview screen once.
The Preview screen has to be =on-Focus= !!


#3

It works!!!!
Thank a lot!!!!


#4

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 === 111) {
$('current').children('.description').toggle();
}
});
$(document).ready(main);

i,m getting the same error please help me thanks


#5

@9sksharma,

You got an UFCCB ( unidentified flying closing-curly-bracket-} )


#6

I am also having the same problem. Here is my code:

var main = function() {
// Making the article to be clickable and informative
$('.article').click(function(){

    //The code that hides the info/the style
    $('.article').removeClass('current')
    $('.description').hide();

    //The code that identifies the current article 
    $(this).addClass('current');

    //The code to display info
    $(this).children('.description').show();


    //This code is for when using the keys on the key board
    $(document).keypress(function(){
        if(event.which === 111){
            //If the O key is pressed
            $('.current').children('.description').toggle();
        } else {
        }

    });    
});

}

$(document).ready(main);


#7

@prosper07,

You will have to close your article =click= Eventhandler
BEFORE
you start defining your document =keypress= Eventhandler.....

our main-function looks like:

var main = function() {
     //BEGIN of main function-body 
    //
    //The CLICK event-handler is

    $('.article').click(function() {

     });

     //now comes the KEYPRESS event-handler

     $(document).keypress(function(event) {

       });
   //END of main function-body
   };

  $(document).ready(main);

#8

EXCUSE ME LEON BUT I AM A NEWBIE , AND* I DIDN'T GET THAT :grin:*


#9

@9sksharma,

var main = function() {
   $('.article').click(function() { 
      $('.article').removeclass('current');  //corr-1
      $('description').hide();
      //  }  UFCCB   //corr-2
      $(this).addclass('current'); //corr-3
      $(this).children('.description').show();
  )};

 $(document).keypress(function(event) {
     if(event.which === 111) {
         $('current').children('.description').toggle();
    }
  });
 };
$(document).ready(main);

#10

Hi everyone please have a look on below code where am I going wrong???

/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 === 111) {
$(.'current').children(.'description').toggle();
}
});
}

$(document).ready(main);

Thanks


#11

@mminchev1,

You are placing the dot outside of your single-quote's
in your jQuery Selector

$(.'article')
$(.'current')


#12

Thank you very much for your support live saver "leonhard_wettengmx_n"


#13

Why is this not working for me (im a noob... -.-)?

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 === 111) {
$('current').children('.description').toggle();
}
});
};
$(document).ready(main);


#14

Nvm found my mistakes -.-


#15

you have to add "." inside your single ' '
$('description')
$('current')
as well there shouldn't be ";" right at the end before $(document).ready(main);


#16

Can someone help me figure out what is wrong? Here is the code:
var main = function() {

};

$(document).ready(main);
class="article">


...


...


var main = function() {
$('.article').click(function() {
$('.description').hide();
$(this).children('.description').show();

});
}
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 === 111) {true

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

}
});

I don't know what I am doing! ~Thanks


#17

Hi! What is wrong with my code?

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

    $(this).addClass('.current');
    $(this).children('.description').show();      
});
$(document).keypress(function(event) {
    if (event.which === 111) {
     $('current').children('.description').toggle();
    }
 });

};
$(document).ready(main);

SyntaxError: missing ) after argument list

Oops, try again.
**It looks like the o key isn't opening a description. Remember to **
**toggle the current article's description inside the event handler. Look **
back at the instructions for the code.


#18

@pkoczara,

+++++ addClass removeClass

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with

 <div class="myClass1 myClass2 myClass3" ></div>

you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.
You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name.
Thus you have to change
**$('.article').removeClass('.current')
$(this).addClass('.current')**
into
**$('.article').removeClass('current')
$(this).addClass('current')**

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .current,
In this .current object
the background property-key is set to a particular VALUE

jQuery uses the same syntax to identify a class-attribute
like in the jQuery-selector
$(".current") by which this HTML-Element and all it's CHILDREN
are selected into a jQuery-object,

This parent-HTML-Element carries the class-attribute with class-name "current"

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page


#19

Thank you very much for explain :slightly_smiling:


#20

@pkoczara,
Here some extra....
Compilation of News Reader (2016-02-02)
http://discuss.codecademy.com/t/help-me-on-o-shortcut/25483/2?u=leonhard.wettengmx.n