# Getting notified in JavaScript when a Media Query changes

Media queries are awesome and well used in modern web development.
But how can one notify JavaScript if a certain media query is met.

There is a window listener called: `matchMedia`, and it does exactly this!

This is what we will be making today:

![JavaScript MediaQuery listener](https://cdn.hashnode.com/res/hashnode/image/upload/v1598621493330/YKAi8d1zv.gif)


## JavaScript Media Query Changes 

To use `matchMedia` we call the following:

```js
var mediaQuery = window.matchMedia('(max-width: 500px)');
```

To use it we can add listeners to it:

```js
mediaQuery.addListener(console.log);
```

Now if we size our screen with the console open it will fire a console log each this this media queries matches.

The return will have a `MediaQueryListEvent`, which contains a value called `matches` to say true or false.

Console logs are cool, but it doesn't really do much for us, so we can also attach a function:

```js
mediaQuery.addListener(alertMe);

function alertMe(e) {
  if (e.matches) {
    document.body.style.backgroundColor = 'green';
  } else {
    document.body.style.backgroundColor = 'red';
  }
}
```

Now, if we resize and hit the media query, our screen will turn green or red depending on yes or no.

See this Codepen for a demo.

%[https://codepen.io/rebelchris/pen/abNwbdY]

> More on MediaQueryList here [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener)

## Browser Support

This function has really good support!
For a novice function, definitely, one to use in projects.

![MediaQueryList support](https://caniuse.bitsofco.de/static/v1/mdn-api__MediaQueryList-1598621022637.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)