<h1>Update Count</h1>
<p><span class="match">0</span> callbacks by <code>matchMedia()</code>.</p>
<p><span class="resize">0</span> callbacks by <code>resize</code> Listener.</p>

body {
  text-align: center;
  margin: 50px;
  font-family: 'Lato';
}

h1 {
  font-size: 2rem;
  text-transform: uppercase;
  color: green;
  font-weight: 900;
}

p {
  font-size: 1.5rem;
}

@media (min-width: 600px) {
  h1 {
    font-size: 4rem;
  }
}

var resizeCounter = 0;
var matchCounter = 0;


function resizeCallback() {
  resizeCounter += 1;
  document.querySelector("span.resize").textContent = resizeCounter;
}

let myMediaQuery = window.matchMedia('(min-width: 600px)');

function matchMediaCallback(myMediaQuery) {
  matchCounter += 1;
  document.querySelector("span.match").textContent = matchCounter;
}

myMediaQuery.addEventListener('change', matchMediaCallback);

matchMediaCallback(myMediaQuery);

window.addEventListener('resize', resizeCallback);
resizeCallback();