title: JS Window Width / Height Function — Works but Need Some Advice
body: <p>I've built this window height &amp; width display function (similar to the one in Chrome DevTools) in JavaScript. It works like this:</p>
  
  <ol>
  <li><p>If you adjust window width / height it displays the current screen dimensions in the appended textbox. </p></li>
  <li><p>If the window is inactive for 3 seconds, the textbox hides.</p></li>
  <li><p>If you re-adjust the window, it resets the timer (to not cause overlap, in case you re-adjust within 1-2 seconds).</p></li>
  </ol>
  
  <p><strong>It works,</strong> this is my 3rd re-write, but I know it can be coded better than this, can someone give me some advice on how to improve my code? I'm still at the rookie stage. </p>
  
  <p><a href="https://jsfiddle.net/kon56edn/" rel="nofollow">https://jsfiddle.net/kon56edn/</a></p>
  
  <pre><code>var boxText = document.createElement('div');
  var boxStyle = boxText.style;
  
  boxStyle.position = 'fixed';
  boxStyle.right = 0;
  boxStyle.top = 0;
  boxStyle.padding = '16px';
  boxStyle.zIndex = 999;
  boxStyle.fontSize = '22px';
  boxStyle.display = 'none';
  
  var timerHandle = setTimeout(3000);
  
  function resetTimer() {
    window.clearTimeout(timerHandle);
  
  timerHandle = setTimeout(function() {
  
    boxStyle.display = 'none';
  
   }, 3000);
  }
  
  window.addEventListener('resize', function(timerHandle) {
  
    boxText.innerText = window.innerWidth + 'px' + ' x ' + window.innerHeight + 'px';
    boxStyle.display = 'block';
    document.body.appendChild(boxText);
  
    resetTimer();
  
  });
  </code></pre>
  
  <p>I really want to get better at writing clean, modular JS. Any help or perspective is appreciated! :-)</p>