Force Layout

by bakhshi

HTML

<header><button class="start">Start</button></header>
<div class="first"></div>
<div class="second"></div>

CSS

header{
    clear:both;
}

div{
    width:200px;
    height:200px;
    float:left;
}

.first{
    background-color: red;
}

.second{
    background-color: blue;
}

JavaScript

'use strict';

const $ = document.querySelectorAll.bind(document);

function clicked(){
    let count = 10;
    const element = $('div.first')[0];
    var update = ()=>{
        const width = element.offsetWidth;
        element.style.width = `${width + 10}px`;
        const newWidth = element.offsetWidth;
        count --;
        if(count > 0)
            setTimeout(update, 200);
    };
    setTimeout(update, 200);
}

$('.start')[0].addEventListener('click', clicked);