// Set the document title
document.title = 'Dynamic Fibonacci Sequence in JavaScript';

// Create a red div in the body
var div = document.createElement('div');
div.setAttribute('class', 'red shadowed stuff-box');
document.querySelector('body').appendChild(div);

var fib = document.createElement('div');
fib.setAttribute('class', 'flex');

// Add instructions
var para = document.createElement('p');
para.textContent = "FIB(0)";
div.appendChild(para);

var computefib = function(sliderPos){
    var now = 0;
    var last = 0;
    if(sliderPos === 0) {
        return 0;
    }

    for(var i = 0; i <= sliderPos; i++){
        if(last === 1 && i === 2){
            last = 0;
        }
        if(i !== 0 && last === 0 ){
            now = 1;
        }
        now += last;
        last = now - last;
        var masdfl = document.createElement('fib');
        masdfl.setAttribute('class', 'fib');
        masdfl.innerHTML = now;
        fib.appendChild(masdfl);
    }
};

var slider = document.createElement('input');
slider.type = "range";
slider.max = "50" ;
slider.min = "0";
slider.value = "0";
slider.oninput = function(){
    para.textContent= "FIB(" + this.value +")";
};
slider.onchange = function(){

    while(fib.firstChild){
        fib.removeChild(fib.firstChild);
    }
    computefib(this.value);
};
div.appendChild(slider);
div.appendChild(fib);