JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<form>1
    <input type="text" id="test" name="test" />2
    <input type="text" id="test2" name="test" />
</form>
<div id="dimensions"></div>
<div id="texte"></div>

CSS

#texte {
    background: grey;
}

JavaScript

$(document).ready(function () {
    $("#test, #test2").keyup(function () {
        var width = parseInt($("#test").val(),10) || '';
        var height = parseInt($("#test2").val(),10) || '';

        if (!(typeof width === 'number' && typeof height === 'number')) {
            return false;
        }
        var max = 200;
        var min = 20;

        var ratio;
        if (width >= height) {
            ratio = max / width;
            width = ratio * width;
            height = height * ratio;
        } else {
            ratio = max / height;
            height = ratio * height;
            width = width * ratio;
        };
        
        $("#dimensions").html(width + " x " + height);
        $("#texte").css({
            "width": width + "px",
            "height": height + "px"
        });

    });
});