JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<img id="streamline1" src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-04-48.png" />
<img id="LAN" src="https://cdn1.iconfinder.com/data/icons/ecqlipse2/NETWORK%20-%20LAN.png" />
<img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-04-48.png" id="streamline" />
<div id="mid"></div>
<div id="bottom"></div>
<div>Speed (mS): <input value="1500" id="speed" type="number" style="position: relative"></input>
    
    Slow Start Threshold: <input value="4" id="ssth" type="number" style="position: relative"></input>
    <button>Apply!</button>
    <!-- dynamic area -->
    <div class="packets"></div>
</div>
<p>
<div id= "table" class="table">
<div id= "window" class="window"> </div>
</div>

CSS

.window {
    width: 20px;
    height: 20px;
    position: fixed;
    left: 0px;
    outline: brown solid medium;
}
.table {
    height: 20px;
    position: fixed;
    left: 20px;
    outline: black solid none;
}

.cell {
    width: 20px;
    height: 20px;
    left: 50px;
    position: fixed;
    outline: black solid;
}

#bottom {
    border: 1px dashed gray;
    position: absolute;
    left: 55px;
    height: 20px;
    width: 500px;
    opacity: 0.5;
    top: 30px;
    z-index=-1;
}
#mid {
    border: 1px dashed gray;
    position: absolute;
    left: 55px;
    height: 20px;
    width: 500px;
    opacity: 0.5;
    top: 10px;
    z-index=-1;
}
.t {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 60px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-color: lightgreen
}
#streamline {
    width: 50px;
    height: 50px;
    right: 0px;
    position: fixed;
    left: 550px;
}
#streamline1 {
    left: 0px;
    width: 50px;
    height: 50px;
}
#LAN {
    width: 50px;
    height: 50px;
    left: 275px;
    position: fixed;
}
.packets{
    display: inline;
}
.inline {
    display:inline-block;
    width:18px;
    height:18px;
    border:1px solid;
    text-align:center;
}

JavaScript

$(document).ready(function () {

    var count = 0;
    var items = 0;
    var packetNumber = 0;
    var speed = 0;
    var ssth= $("#ssth").val();
    var window_left=0;

   for(var i=1;i<=32;i++){
$('#table').append("<div class='inline' id='"+i+"'>"+i+"</div>");
    }
        document.getElementById(1).style.width=22;
    
    $("button").click(function () {
        if (count < ssth) {
            if(items==0)
                items=1;
            else
            items = items * 2;      
            count++;
        } else {
            items = items + 1;
        }

        window_left+=20;
        window_width=items*20;
     
        document.getElementById("window").style.left= window_left+"px";
        document.getElementById("window").style.width=window_width+"px";
        
        speed = +$("#speed").val();
        createDivs(items);
        animateDivs();
    });

    function createDivs(divs) {
        packetNumber = 1;
        var left = 60;
        for (var i = 0; i < divs; i++) {
            var div = $("<div class='t'></div>");
            div.appendTo(".packets");
            $("<font class='span'>" + packetNumber + "</font>").appendTo(div);
            packetNumber++;
            div.css({
                left: left
               /* opacity: 0*/
            }).fadeOut(0);
            
            //div.hide();
            //left += 20;
        }
    }

    function animateDivs() {
        $(".t").each(function (index) {  // added the index parameter
            var packet = $(this);
                 

            packet
                .delay(index * 200)
                .fadeIn(200, function() {
     $('#table #' + (index + window_left/20)).css({background:'yellow'});
 })
                .animate({left: '+=230px'}, speed)
                .animate({left: '+=230px'}, speed)
                .fadeOut(200, function () {
                    packet
                        .css({
                            top: '+=20px', 
                           ...