Step 4 - check my syntax please


#1



I see what our fellow classmates have written before regarding this step, step 4 after I came up with my solution. That said, I am wanting a better trained eye then mine to critique my results. I tried to stay within the confines of the directions in terms of methods to utilize though, .find() and .toggleClass. I also had to read up on them on the jquery.com site before figuring it out. I'd also agree with a fellow classmate that the directions seemed a little vague in terms of referencing the use of the toggleClass.

Is what I came up with stylistically correct in terms of the "appropriate" syntax that a seasoned developer would use in this case?


var main = function() {
	$('div.day').click(function () {
		$('div.hourly').slideToggle('slow');
		$( 'div.weekday' ).find( '.glyphicon' ).toggleClass( 'glyphicon glyphicon-minus' );
	});
};

$(document).ready(main);


#2

Hi @jnl2,

Your code looks fine. The only thing I'd suggest is for you to remove the div part of your selectors. selecting .hourly will work without the div in front :slight_smile:


#3

Thanks for the feedback.

Upon further testing it appears that the minus sign produced after initiating the click() method event is not returned to a plus sign after clicking on the element the second time. jQuery.com's page appears to inform one the toggleClass() method effect can be used to return class's style back to the original state when the targeted element is clicked upon again.

Experimenting with adding a second toggleClass() method to my code is not producing the desired effect. I'd really appreciate some suggestions on how to remedy this issue.

Thank you.


#4

This example will give you something to go on. We only need one class selector.

var main = function() {
  $('.day').click(function(){
    $(this).find('span').toggleClass('glyphicon-minus');
    $(this).next().toggle();
  });  
};

#5

Thanks you two.

It appears that the desired effect is produced with this code block:

var main = function() {
	$('div.day').click(function () {
		$('div.hourly').slideToggle('slow');
		$(this).find('span').toggleClass('glyphicon-minus');
	});
};

$(document).ready(main);

Though I would not have gotten to that answer on my own.

It also appears that my example slideToggles() open all of the days of the week at once, something that I'm not sure is what is desired here.


#6

Don't give up until the behavior meets all your expectations. Keep at it.


#7

Are all of the days of the week to slide open and display the hourly information when one day is clicked?


#8

No. Only the day you click. The plus should turn into a minus and the details for only that day should expand into view.


#9

Back to working from the suggestion...

Aside from your example not utilizing the slideToggle method as found in line 3 below...

var main = function() {
	$('.day').click(function () {
		$('.hourly').slideToggle('slow');
		$( '.weekday' ).find('.glyphicon').toggleClass('glyphicon-minus');
	});
};

The key to ONLY sliding open on day's worth of data must lay in your code's line 4 above. Correct?


#10

Yes, toggle() is apparently deprecated ages ago but still supported in the current version of jQuery. That would mean amending the line as follows:

$(this).next().slideToggle();        // default transition duration
// or
$(this).next().slideToggle('slow');  // select transition duration

Myself, I favor the approach that has the least number of class selectors, hence the approach I took above. Traverse the document tree as much as possible so you get practice.


#11

After some experimentation with the next() method and some goggle-ing on it as well as with the toggleClass() and your suggestion of "learning how to traverse the DOM", this line was found on StackOverflow:

$(this).parent().next().toggleClass("display");

My hope and guess is that this example holds the key.

To be continued....


#12

<div>                  // this.parent
  <button></button>    // this
  <ul></ul>            // this.next  // also, this.parent.find('ul')
</div>
<div class="display">  // this.parent.next

</div>

See the relationships?


#13

WINNER!! Properly working code, one day at a time is changed when clicked upon by toggling open the hourly class's style change as well as changing the css for the glyphicon class from glyphicon-plus to glyphicon-minus.

var main = function() {
	$('.day').click(function () {
		$(this).next().toggle();
		$(this).find('.glyphicon').toggleClass('glyphicon-minus');
	});
};

$(document).ready(main);

Notes:

var main = function() {
	$('.day').click(function () {
		$(this).next().toggle();
			// The line above changes the focus from the 'day' class to its next SIBLING, 'hourly', in the DOM and runs the toggle method on it.
			// the DOM:
			// <div class="day row">/* original focus */</div>
			// <div class="hourly row">...</div>
		$(this).find('.glyphicon').toggleClass('glyphicon-minus');
			// The focus is still on the 'day' class originally here too. The find method takes a selector, here the 'glyphicon' class, and searches for it in the DESCENDANTS of the 'day' class and applies the toggleClass method to the class it finds and changes the css from glyphicon-plus to glyphicon-minus.
			// the DOM:
			// <div class="day row">
				// <div class="weekday col-xs-4">
					// <span class="glyphicon glyphicon-plus"></span>
				// </div>
                       // </div>
	});
};

$(document).ready(main);

#14

Phew! Could not have completed this exercise w/o your help, instructors.

Steps 3 and 4 in the directions were worded just vaguely enough for me to miss which were the key terms to read up on outside of the material offered in the course's covered material.

Is my use of the term 'focus' above proper??


#15

The term normally applies to form elements that are actively engaged:

<input>

input:focus {

}

would be a CSS selector rule that applies only when the user has clicked into (or tabbed into) the form control.

It is above used as a CSS pseudo-class, and applies also to.

<a></a>

a:focus {

}

also applies when tabbed onto. Use your tab key to navigate all the links in a web page. You will see they get a little dashed border on them.

`focus`

in JS terms refers to form elements more directly.

I think it is fair to describe it as you have so long as you can equate that to the event object in context, namely, this.


#16

Ok, thanks.

I was searching for a term to use in a general sense; what the browser would currently be displaying before and after the event/effect took place.


#17

JavaScript DOM events are quite closely linked to CSS pseudo-classes and with CSS3, transition and animation events. In fact, if you were to look up all the possible events the list would be quite long if both keyboard and mouse events listed together.

focus equates with hover in link elements, and click in form elements. (Enter if focused with Tab key.) I'll have to dig around to see if there is such a thing as a FormEvent, but no doubt there is.

The event object will be one of a KeyboardEvent or MouseEvent. It will have as one of its properties the event element if I'm not mistaken. Going to dig out some old code to examine this. Back in a sec.

Edit: Back.
Ended up writing this to fill in the gap in my memory...

function enumerate_object(obj) {
    var text = '';
    for (var key in obj) {
        if (typeof obj[key] !== 'function') {
            text += "<br>" + key + ": " + obj[key]
        }
    }
    return text;
}

The obj that is being passed in is an EventObject, more commonly written in a handler as (e).

Here is some sample jQuery that calls it...

$(document).ready(function() {
    $(document).keydown(function(key){
       $('div').html(enumerate_object(key));
    });
});

This is rather more specific than a click event but I wanted to take a look at the event object, itself, which does not sit around in memory for very long (replaced by next event). It's what is known as a transient object. It has no real place in the grand scheme, and is only referenced internally or in our handler. The e or key is the variable we give the listener to pass in this event object.

This is after pressing the a key:

originalEvent: [object KeyboardEvent]
type: keydown
timeStamp: 18446744071619000000
jQuery171044877161023024814: true
keyCode: 65
key: a
charCode: 0
char: undefined
which: 65
view: [object Window]
target: [object HTMLBodyElement]
shiftKey: false
relatedTarget: undefined
metaKey: false
eventPhase: 3
currentTarget: [object HTMLDocument]
ctrlKey: false
cancelable: true
bubbles: true
altKey: false
srcElement: undefined
relatedNode: undefined
attrName: undefined
attrChange: undefined
delegateTarget: [object HTMLDocument]
data: null
handleObj: [object Object]

srcElement: undefined is the one we can bring attention to as it relates to the earlier question of whether the clicked object is listed as a property. Were this a click event, the source element would be described in some way, possibly a DOM node. This relates to this in some way, I'm sure.


#18

https://discuss.codecademy.com/t/step-4-check-my-syntax-please/70278/4

is the working code, if it be known. It does everything it is supposed to do. Traversing means a class free environment once the parent is known.


#19

We're not instructors, we're mates, just everyday people on the boards. As such regard us as the ordinary members that we are. We're all equals in this community.


#20

To the above sample jQuery we could add,

    $(document).on('mousedown', function(e){
       $('div').html(enumerate_object(e));
       $('img').animate({'top': e.offsetY, 'left': e.offsetX})
    });

It still doesn't answer the question of source element, though, but it does let us inspect the mousedown event. The 'effect' is to position Mario wherever you click on the screen. If you click Mario, the image roughly restores to its original position (depending where you click on it).

Here is where I've been testing it...

https://www.codecademy.com/en/courses/web-beginner-en-JwhI1/2/2

Remember to add a DIV to the HTML for the output.