JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="box1" onclick="bigger()">

</div>
<div id="box2" onclick="bigger()">

</div>

CSS

#box1 {background-color:red;border-radius:500px;}
#box2 {background-color:red;border-radius:500px;}

JavaScript

var w = 200;
var h = 200;

var box1w = document.getElementById('box1');
var box1h = document.getElementById('box1');
box1w.style.width = w + 'px';
box1h.style.height = h + 'px';

var foo = setInterval(function () {
    if(w<10) cancelInterval(foo)
    w = w - 10;
    h = h - 10;
    box1w.style.width = w + 'px';
    box1h.style.height = h + 'px';
}, 1000);

function bigger() {

w = w + 10;
h = h + 10;

box1w.style.width = w + 'px';
box1h.style.height = h + 'px';

if (w > 190) {w=200}
if (h > 190) {h=200}

}