fibo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <title>Fibonacci</title>
</head>
<body>
    <div class="input_box">
        <input class="input">
        <button class="btn">Check</button>
        <h2 style="font-size: 3vh">function fib(n){ n<=1 ? return n : fib(n-1) + fib(n-2)};</h2>
    </div>

    <style>
    h2{
        font-size: 3vh;
        margin: 0 0% 0 5%;
    }
    .input_box{
        display: flex;
        width: 100%;
    }
    body{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    h1{
        display: table-cell;
        font-size: 3vh;
        box-shadow: 0 0 0 0.3vh black;
    }
    </style>
    <script>
        let input = $('.input');
        $('.btn').on('click', function(){
            $("h1").detach();
            if(input.val()<=0 || input.val()>14 || isNaN(+input.val())){
                return;
            }
            drawFibonacci(input.val());
        })
function drawFibonacci(n){
    function fibonacci(n){
        if(n==0){return 0}
        let fiboNum = [0,1];
        for (let i=1; fiboNum.length<=n; i++){
            fiboNum.push(fiboNum[i] + fiboNum[i-1])
        };
        return fiboNum.pop();
    };

    function fib(n,vetka,id){
        if(vetka=='master'){
            $('body').append(`<h1 id="${id}">${fibonacci(n)}</h1>`)
            id=0;
            $(`#${id}`).css({
                'background-color':'white'
                });
        }else if(vetka=='left'){
            $(`#${id}`).append(`<h1 id="${id}1">${fibonacci(n)}</h1>`)
            id=id+'1';
            $(`#${id}`).css({
                'background-color':'red'
                });
        }else{
            $(`#${id}`).append(`<h1 id="${id}2">${fibonacci(n)}</h1>`)
            id=id+'2'
            $(`#${id}`).css({
                'background-color':'green'
                });
        }
        // console.log(id + "__" + n)
        // $(`#${n}`).append($(`<h1 id="${n-1}">${n-1}</h1>`))
        return n<=1 ? n : fib(n-1,'left',id) + fib(n-2,'right',id);
    }
    return fib(n,'master',0);
    // console.log("result" + fib(n,'master',0));
}
    </script>
</body>
</html>