This is a refactor of a CODEPEN: Get Viewport Dimensions Version 2 (complete) by David

The original article is: Building a “Get Viewport Dimensions” App with Vanilla JavaScript by David at TechStacker.

This was an outstanding script and post. I especially appreciated how David (the contributor) walks the reader step-by-step in very clear language. First with just the minimum basics to get the script running then an optimized version which gives us a first taste (if you're a novice) of functional programming with throttling decorators for running asynchronous calls. There was nothing wrong with the script from my point of view but I refactored it to add functionality and style. I also prefer wrapping larger chunks of code into smaller ones. This leads me to create many more functions and objects for easier maintenance and self-commenting. The refactored script reflects this.

Added functionality are names of device targets which can easily be modified or expanded by editing the getTarget function. This can be removed by editing the getData and setData functions. Shell container styles can be edited by modifying #viewportdata, #dims, and #target in the CSS file

Other added functionality is the ability to stop the script by clicking once on the dims when they display. It works by wrapping the dims and target subcontainers (shell in the Javascript) with an anchor tag (displayed as a block) and adding a very basic onclick event that calls a function endTask. That function uses removeEventListener to remove the addEventListener that invokes throttleSetView.

Everything in header and below is just an HTML template used to demonstrate how this script might perform in a populated web page.