I've been struggling with some code and quite seem to get it to work - apologies if this is a silly question, I'm still quite new to JavaScript/jQuery etc.

I'm trying to build a Weather App as part of the Free Code Camp course and have built using simpleWeather.js. I'm now trying to animate a little bit of the page to make it a bit more interactive. I have some code:

$('#drop').on('click', function() {

  $('.fa-chevron-circle-down').css('transform', 'rotate(180deg)');

});

I believe this should on a click, rotate the icon 180 degrees but no matter what variations I try, I can't seem to get it to work. After spending hours yesterday playing with it I decided it's time to ask for help! (The idea is that once it works, I'll animate the elements below so they only show when the button is clicked).

My codepen is https://codepen.io/woftis/pen/VjppYM

Thanks in advance for any help anyone can give.

Your #drop element has been created after DOM load i.e. dynamically. Hence you need event delegation here. So attach your click to document and then refer your element - #drop.

$(document).on('click','#drop', function() {

  $('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');

});

Updated PEN

To be more simpler, since #weather element existed during DOM load, insted of document you can add it to #weather element. Consider below example.

$('#weather').on('click','#drop', function() {

  $('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');

});

and also I believe, it should have been 180deg to be proper turn-around.

Updated PEN 2 with 180deg and #weather

I was having an issue with jquery .css function with code that's very similar to to OP.

Problem

The .css jquery function would not change the css on my .dot-one or .dot-two classes when I clicked button with the #correct-email id.

Here's the required code examples:

$(document).on('click', '#correct-email', function () {

        $('.dot-one').css('background-color', '$white');

        $('.dot-two').css('background-color', '$gray-darker');

        ...

      });

.dot-one {

  background-color: $gray-darker;

}



.dot-two {

  background-color: $white;

}

Solution

$(document).on('click', '#correct-email', function () {

        $('.dot-one').css('background-color', '#fff');

        $('.dot-two').css('background-color', '#222');

        ...

      });

Apparently, jquery doesn't like variables SASS variables being passed into the .css function. I couldn't find that anywhere in the documentation. My assumption is that it'd be able to compute the new value based off of the SASS variable. But it seems all that stuff is pre-processed by sass and not made available to css.

According to the SASS documentation this is what it sounds like is happening.