Команда NaN, задача «Рибне життя»

Доповідь команди NaN (Київський природничо-науковий ліцей №145) по задачі №1 «Рибне життя» (CETO-2019):

• Презентація (pdf, 5 МБ)
• Моделювання (JavaScript, виконується у браузері): для запуску треба клікнути по білому полю угорі сторінки.
• Код:

<!DOCTYPE html>
<html>
<head>
    <title>Fish life</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="chartist.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
        background-color: #fff;
    }
    .window{
        display: block;
        background-color: #fff;
        width: 70%;
        margin: 0 auto;
        height: 60px;
        transition: 1s;
        margin-top: 20px;
        border-radius: 15px;
        box-shadow:  0 +20px 40px 1px grey;
        margin-bottom: 50px;
        overflow: hidden;
        text-align: center;
        font-size: 50px;
        color: #262626;
    }
    #canvas{
        width:100%;
        height:50px;;
        box-shadow: 0 0px 20px 0.1px grey;
        border-radius: 15px 15px 0 0;
        display: none;
        margin: 0 auto;
        transition: 0.5s;
    }
    input{
        display: none;
        background-color: #fff;
        width: 13.5%;
        height: 30px;
        position: absolute;
        border: 2px solid rgba(0,0,0,0.5);
        color: #262626;
        text-align: left;
        font-size: 16px;
        border-radius: 20px;
        padding-left: 5px;
    }
    input {outline:none;}
    input:focus::-webkit-input-placeholder { color:transparent; }
    input:focus:-moz-placeholder { color:transparent; } 
    input:focus::-moz-placeholder { color:transparent; } 
    input:focus:-ms-input-placeholder { color:transparent; } 
    .i1{
        top:100px;
        left:32%;
    }
    .i2{
        top:100px;
        left:52%;
    }
    .i3{
        top:150px;
        left:41.6%;
    }
    .but{
        display: none;
        width: 13.5%;
        height: 30px;
        border-radius: 20px;
        position: absolute;
        top: 200px;
        left: 42%;
        background-color: #262626;
        text-align: center;
        font-size: 25px;
        color: #fff;
        cursor: pointer;
        transition: 0.5s;
    }
    .but:hover{
        background-color: rgba(0,0,0,0.7);
    }
</style>
<body>
    <div class="window" id="Win" >
    <div id="canvas"><canvas id="myChart"></canvas></div>
    <div class="but" id="buton" onclick="funk()">Play</div>
    </div>
    <input type="text" class="i1" name="Write here" placeholder="Write here time">
    <input type="text" class="i2" name="Write here" placeholder="Write here fish">
    <input type="text" class="i3" name="Write here" placeholder="Write here speed">
    <script type="text/javascript">
window.onload=function function_name() {
    var flag=1;
    document.getElementById("Win").onclick=function () {
        if(flag==1){
            document.getElementById("Win").style.height="680px";
            flag=2;
            $('#canvas').slideDown(500);
            setTimeout(function () {
                $('.i1').slideDown(200);
            },400);
            setTimeout(function () {
                $('.i2').slideDown(200);
            },600);
            setTimeout(function () {
                $('.i3').slideDown(200);
            },800);
            setTimeout(function () {
                $('.i4').slideDown(200);
            },1000);
            setTimeout(function () {
                $('.i5').slideDown(200);
            },1200);
            setTimeout(function () {
                $('.but').slideDown(200);
            },1400);
        }
    }
}
var count=1;
function funk() {
    if(count%2==1){
        for(var i=1;i<=3;i++){
            $('.i'+i).slideUp(300);
        }
        setTimeout(function() {
            $('#canvas').css('height',"530px");
        },400)
        setTimeout(function() {
            $('.but').css('top',"580px");
        },400)
        setTimeout(function () {
                $('.but').html("Back");
        },500);
        setTimeout(function(){
            const year=document.getElementsByClassName('i1')[0].value;
            var fish=document.getElementsByClassName('i2')[0].value;
            var speed=document.getElementsByClassName('i3')[0].value;
            var label = [];
            var serie = [];
            label[0]=2;
            for (var i=1; i<=48; i++) {
                label[i] = label[i-1]+2;
            } 
            for(var i=0; i<=48; i++){
                var o=fish;
                for(var j=1; j<=year; j++){
                    o =(1-label[i]/100)*o*Math.pow(speed,1-o);
                }
                serie[i]=o;
            }
            for (var i=0; i<=48; i++) {
                label[i] = label[i]+"%";
            }           
var ctx = document.getElementById('myChart').getContext('2d');
window.chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: label,
        datasets: [{
            label: "fish",
            borderColor: 'red',
            data: serie,
        }]
    },
    options: {}
});
        },1000)
        count++;
    }
    else{   
        window.chart.destroy();
        setTimeout(function () {
            $('#canvas').css('height',"50px");
        },0);
        setTimeout(function () {
            for(var i=1;i<=5;i++){
                $('.i'+i).slideDown(300);
            }
        },500);
        setTimeout(function() {
            $('.but').css('top',"200px");
        },100)
        setTimeout(function () {
                $('.but').html("Play");
        },300);
        for(var i=1;i<=5;i++){
            $('.i'+i).val("");
        }
        count++;    
    }
}
    </script>
</body>
</html>