How to keep track of window width via js?

  • 0
    Greetings to all. The question is, how to make "responsiveness" through js? It should be as simple as possible, because I'm just starting to learn this language ...
    TK is "The layout must be responsive (Responsive), the minimum width of the wrapped content.
    630px, maximum - 1270px. The change in the width of the wrapped will be checked.
    template, and not changing the width of the browser window, i.e. if, for example, the width of the browser window
    1920, and the width of the wrapped content will be limited to 630 pixels, then the template should
    match layout 630.psd. "

    UPD: since I already had it laid out through a media query, it was decided if the width is less than 1270 - add the .mobile class. In this regard, the question is how to select all the elements inside the container? My miracle code throws the error "Uncaught TypeError: Cannot read property 'add' of undefined at addClass"

    const container = document.querySelector ('. container'),
    All = document.body.querySelectorAll ('*');

    console.log (All);

    function addClass () {
    if (container.offsetWidth & lt; 1270) {

    container.classList.add ('mobile'),

    console.log ('done');

    } else if (container.classList.contains ('mobile')) {
    console.log ('true'),

    All.classList.add ('mobile'); (Line 58)

    console.log ('added');

    };

    };

    let timerId = setInterval (() = & gt; addClass (), 500);

    addClass ();
    JavaScript Harrison Cantu, Apr 1, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!