JSFiddle - React, Tailwind, and code Playground

by karin

HTML

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

<div id="container">
    <div id="box"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
    <div id="box7"></div>
    <div id="box8"></div>
</div>

CSS

#container {
    width:320px;
    height:480px;
    background:#eeeeee;
    padding:15px;
}
#box, #box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8 {
    margin:-15px;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

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 > 300 || s > 300 || t > 300) {
        do {
            f = f / 2;
            s = s / 2;
            t = t / 2;
        }
        while (f > 300 && s > 300 && t > 300)
    }
    $("#box7").css('background', 'purple');
    $("#box7").animate({
        "height": "100px",
            "width": "100px"
    },
        "slow", function () {
        $(this).html("Weather");
    });
    $("#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
    });
    $("#first").val(f);
    $("#second").val(s);
    $("#third").val(t);

    /* document.write(f);
    document.write("\n");
    document.write(s);
    document.write("\n");
    document.write(t);*/
});