Okay. For the rest of this course, we will not use this link tag that was just a demo. So I will get rid of the link tag. I will also delete the animation that CSS file in the public directory. And so we should be back in our example to depend on the media query to decide if we upgrade to a party. And now in case you wanted to detect the status

to decide if we upgrade to a party. And now in case you wanted to detect the status of the preferred reduced motion in JavaScript, you can do so with window that match media. And so you can see that's a function that's expecting the media query to try to match. So we can do window that match media and then it's a bit of a weird syntax, but you need quotes and then inside of its parenthesis with the name of the media query.

and then inside of its parenthesis with the name of the media query. So prefers red used motion set to reduce. And so right now this is set to true. So let's evaluate this and you can see we have this matches properly set to true. Let's turn the checkbox off and run it one more time. And this time it is false. Now there's a difference compared to CSS where

And this time it is false. Now there's a difference compared to CSS where whenever you toggle the checkbox, the state is updated dynamically here in JavaScript, uh, you do not get the auto update, but you can see that you get an unchanged event, which is null. And you can use this change event to have an event listener that does something. So let's rewrite this, but we are going to store it.

to have an event listener that does something. So let's rewrite this, but we are going to store it. Let me clear the console into a cons. Query equals, and I'm going to set this to the window match media. So query is the result of that. And so now we can do query that, add event listener and we want to listen to the change event. And then we are going to have a callback function here where you can do the changes that you need in JavaScript.

And then we are going to have a callback function here where you can do the changes that you need in JavaScript. Here, let's just console log and we log the value of this matches, so query dot matches. So let's try that now with a bit of luck. When I toggle the reduce motion checkbox, it gets logged to true and if I check it back off, it gets logged to false. And so a little bit more wiring up to do. But this is how you can check for the user preference in terms of reduce motion

But this is how you can check for the user preference in terms of reduce motion with JavaScript so you know how to do it with HTML, with CSS and with JavaScript. So no excuses. You should always do your best to respect and honor the user's preference. If they don't want motion, do not give it to them. Do not force them to have it. With that out of the way, let's move on.

Do not force them to have it. With that out of the way, let's move on.