7. The "o" shortcut


#1



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

I am stuck on this one as it does not open any description on pressing the "o" key. i have copied the hint and it still does not work. Is it possible that its a bug in the code checker. The error message shown is as follows:

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.


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


$(document).ready(main);


Thanks in advance!


#2

Hello @back2future,

Your keypress()-function is actually INSIDE of the click()-function

This should work:

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);

Hope that this will help you :slight_smile:


#3

Hi @0xb4dc0ded

Thanks. That was very helpful. I knew its a small detail somewhere but you know how it is when you keep looking from the same angle and all other alternatives are kind of non-existent. Really hope that will get used to looking at a problem from different perspectives.

Thanks again!!! Hope this helps other people as well.


#4

Hey there once again, @back2future

As I said in a few other of my posts - sometimes the task is not really "good" couched.
You're not the only one which has difficulties with that. :rolling_eyes:

But yeah, that's why we, the community, are here for - to help others :slight_smile:


#5

@0xb4dc0ded

do you think the guys from codecademy are improving the service based on comments in the forum?


#6

I hope so :stuck_out_tongue:
Well, guess IF they pass by on such a comment, they write it down and try to improve it :smile:


#7

@0xb4dc0ded

btw, any idea whats the best way to keep track of the parentheses? is the simplest way just to check them one by one (open/close). if there is an IDE I suppose it will show if there are parentheses missing but is there some kind of rule of thumb to look at in absense of an IDE?


#8

hey @back2future, that's a pretty good question you asked there.

Well, there's not really a rule of thumb to check your code
- but you can simplify your work!

Let's talk about design. :sunglasses:

Yet it's the only good way to avoid endless debugging - format your fxxn code.
And with that I don't mean "only" the curly braces / parentheses, but also the use of whitespaces.
Cause it's good in two ways.

  1. The code is "smoother" for others to read.
  2. You spare a lot of debugging-time, if you format it.

Let's be honest with ourselves.

This:

var main = function () 
{
    var xyz = 1;
  
    if (var i = 0 i < xyz; i++) 
    {
        /* 
        Do
        This
        And
        That
        */
    }
};

$(example).ready(main)

is waaaay easier to read, understand and debug than this:

var main=function(){var xyz=1;if(var i=0;i<xyz;i++){/*DoThisAndThat*/};$(example).ready(main);

^ Tho' the compiler accepts both, cause it ignores whitespaces. But won't compile them, cause they got a mistake.

EXERCISE: Find the mistake in both codes :sunglasses:

Do yourself (and obviously the community aswell) a favour - format your code. It's he.ll on earth to debug a code like that.
(Yup, I speak from experience)


In this discussion board it's aswell easy to format the code already in the Editor (itself, not the post-editor here in the discussion-board)
- just mark your entire code (in the editor..) and press Shift + Tabulator and THEN past it into your post (... and use proper markups, please).


SOLUTION: Mistakes in the code :smiley:

var main = function () 
{
    var xyz = 1;
  
    // Missing semicolon here 
    //           ↓
    if (var i = 0; i < xyz; i++) 
    {
        /* 
        Do
        This
        And
        That
        */
    }
};

&

//                                   Missing curly ending brace here ↓
var main=function(){var xyz=1;if(var i=0;i<xyz;i++){/*DoThisAndThat*/}};$(example).ready(main);

Way more complicated in the unformatted code, right? :stuck_out_tongue:


Greez, 0xB4DC0DED
Guess I should ask a mod to pin this post somewhere lol.


#8 Hey I'm having trouble with my code. It keeps on returning "SyntaxError; Unexpected token ="
What if choice1 is scissors? What am I doing wrong?
#9

thanks, that was helpful. I recently came across the second type of code and was wondering why would people code that way. (it was the code of some us/israeli joomla designers) and i supposed that they did it so that other people dont bother to "understand" their code (since they are charging for support)

(and yea we should probaby pin this discussion to another topic).


#10

There is quite a variety of indent styles:


But I guess the most important is that you can read it and that you keep consistent in using one style. Also when you participate in a group project this might become really important that the group just uses one style so that anybody can read, understand and maybe alter parts that this person has not written himself.


#11

@back2future

codecademy are improving the service based on comments in the forum?

Kind of; we (the moderators) watch the forum, and help learners out, and if we see a popular request for a feature or a problem lots of people are running into, we'll try to fix it or pass it along to the team so they can fix it or add the feature :slight_smile:


#12

@haxor789
thanks for the nice explanation. regarding the team projects, is the indentation the most universal of all styles that will be easiest for the team to work with?


#13

@zystvan

thanks for your comment. I guessed so as codecademy is a great service and obviously created by intelligent people, hence it doesnt make sense for them not to follow the forum and adapt the features accordingly.


#14

Obviously depends on your team what they prefer and what you prefer. But as people ambitiously fight holy wars on whether a tab should be 1,2 or 4 spaces there is probably some literature to study on what is the best but in the end It's probably also a matter of personal preference and what you're used to.