Submitted
In this project, the biggest takeaway for me is learning how to work with JS media queries using window.matchMedia() method. Reference from CSS Tricks
// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')
const handleMediaQueryChanged = (e) => {
// Check if the media query is true
if (e.matches) {
// Then log the following message to the console
console.log('Media Query Changed!')
}
}
// Register event listener
mediaQuery.addListener(handleMediaQueryChanged)
// Initial check
handleMediaQueryChanged(mediaQuery)
-- Any feedback is welcomed. Thanks in advance!