update the current matchmedia example code

[codomposer]

Improve matchMedia Example

Description

This PR modernizes and significantly improves the existing matchmedia example by fixing bugs, adding comprehensive documentation, and enhancing the user experience.

Changes Made

Bug Fixes

• ❌ Removed deprecated document.body.onresize event handler
• ✅ Replaced with proper addEventListener('change') on MediaQueryList objects
• ✅ Updated var declarations to modern const/let

Code Organization

• Separated inline CSS into style.css
• Separated inline JavaScript into script.js
• Updated index.html to link external files
• Added proper meta tags and semantic HTML

New Features

• Added real-time status dashboard showing viewport dimensions
• Added visual indicators for all active media queries
• Added orientation detection (portrait/landscape)
• Added smooth transitions and modern UI design
• Added console logging for debugging

Documentation

• Created comprehensive README.md with:
  • Detailed explanation of how the API works
  • List of improvements and bug fixes
  • Common use cases and examples
  • Browser support information
• Added extensive inline comments in JavaScript:
  • JSDoc-style function documentation
  • Explanation of MediaQueryList objects
  • Performance tips and best practices
  • Additional examples for other media query types

UI/UX Improvements

• Modern gradient design with smooth color transitions
• Background changes based on viewport width (red/blue/green)
• Professional styling with proper spacing and typography
• Responsive design that works on all screen sizes
• Visual feedback for all media query states

Why These Changes?

1. Fixes Bugs: The original used deprecated APIs that don't work correctly
2. Educational Value: Comprehensive comments help developers learn the API
3. Modern Standards: Uses current best practices and ES6+ syntax
4. Better UX: More engaging and informative demonstration
5. Maintainability: Separated concerns make code easier to update

Testing

Tested by:

• Resizing browser window across all breakpoints (narrow/medium/wide)
• Verifying media query listeners fire correctly
• Checking console logs for proper event handling
• Testing on different screen sizes
• Verifying all visual indicators update correctly

Screenshots

The demo now shows:

• Real-time viewport dimensions
• Active media query indicators
• Smooth background color transitions
• Clean, modern interface

---

This improvement makes the example more valuable for MDN users learning about the window.matchMedia() API.