Question: 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.

Answer: 
Your `#drop` element has been created after `DOM load` i.e. **dynamically**. Hence you need **[`event delegation`](https://learn.jquery.com/events/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`](https://codepen.io/kshkrao3/pen/JKWmKZ)
=======================================================**

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`](https://codepen.io/kshkrao3/pen/RRpeGO)
==================================================================================**
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](https://sass-lang.com/guide) this is what it sounds like is happening.