JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<input id="first" value="380"></input>
<input id="second" value="600" />
<input id="third" value="360" />
<a href="#" id="btn">click</a>

<div width="100">
    <div id="box"></div>
    <div id="box3"></div>
    <div id="box2"></div>
</div>

JavaScript

$(document).ready(function () {
    $("#btn").click(function () {
        var f = $('#first').val();
        $("#box").css('background', 'blue');
        $("#box").animate({
            height: f
        });
        $("#box").animate({
            width: f
        });
    });
    var f = $('#first').val();
    var s = $('#second').val();
    var t = $('#third').val();
    if (f > 320 || s > 320 || t > 320) {
        do {
            f = f / 1.5;
            s = s / 1.5;
            t = t / 1.5;
        }
        while (f < 320 && s < 320 && t < 320)
    }
    document.write(f);
    document.write("\n");
    document.write(s);
    document.write("\n");
    document.write(t);
        
    $("#box").css('background', 'blue');
    $("#box").animate({
        height: f
    });
    $("#box").animate({
        width: f
    });
    $("#box2").css('background', 'green');
    $("#box2").animate({
        height: s
    });
    $("#box2").animate({
        width: s
    });

    $("#box3").css('background', 'yellow');
    $("#box3").animate({
        height: t
    });
    $("#box3").animate({
        width: t
    });
});