Focusing section of a page

focus.js

// focus(selector) will hide everything on a page,
// then centers and displays what the selector matched

var container

var focus = (selector) => {
    if (!container) {
        container = document.createElement('div')
        container.style.width = document.body.style.width = '100vw'

        container.style.height = document.body.style.height = '100vh'
        container.style.backgroundColor = 'white'
        container.style.display = 'flex'
        container.style['flex-direction'] = 'column'
        container.style['align-items'] = 'center'
        container.style['justify-content'] = 'center'

        Array.prototype.forEach.call(document.body.children, function(el) {
            el.style.display = 'none'
        })
        document.body.appendChild(container)
        var innerContainer = document.createElement('div')
        innerContainer.style.width = '95%'
        container.appendChild(innerContainer)
        container = innerContainer
    }

    while (container.firstChild) container.removeChild(container.firstChild)

    var els = document.querySelectorAll(selector)
    els.forEach(function (el) {
        var child = el.cloneNode(true)
        child.style.margin = 'auto'
        container.appendChild(child)
        
    })
}