Practise3.2

by Zsanett Tamás

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--    <link href="css/normalize.css" rel="stylesheet">-->
    <link href="main.css" rel="stylesheet">
</head>

<body style="width: 50%; margin: auto; padding: 2rem;">
<label for="floorNumber">Adja meg melyik emeletre szeretne menni!</label>
<input type="text" name="floorNumber" id="floorNumber" value="0">
<button id="readerBtn" type="submit">Go!</button>
<div id="floorsContainer" class="btn-list"></div>

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script src="main.js"></script>
</body>

</html>

CSS

#floorsContainer {
    display: flex;
    flex-direction: column-reverse;
}

button {
    margin: 5px 0;
    background-color: #054587;
    color: white;
    padding: 10px;
    border: none;
    align-self: flex-start;
    box-shadow: 0px 5px 3px 0px #3d876b;
}


.btn-list .active {
    background-color: #1e8782;
    color: white;
    box-shadow: 0px 5px 3px 0px #054587;
}

.btn-list .active:hover {
    background-color: #1b6d85;
    color: white;
}

JavaScript

//További feladatok Nov. 12.
//Adott egy háztömb x emelettel, ebben a házban van egy lift, x a bekért érték, Hol van a lift?

//A bekért érték rajzolja ki az emeletek számát gombok mentén egymás alatt. Nyilván először a lift a földszinten van, ha rányomok x gombra a lift menjen fel oda.


let readerBtn = document.getElementById('readerBtn');
let floorsContainer = document.getElementById('floorsContainer');

readerBtn.addEventListener('click', function () {
    let floorNumber = document.getElementById('floorNumber').value;
    let i = 0;
    while (i < floorNumber) {
        let floorBtn = document.createElement('button');
        floorBtn.type = 'button';
        floorBtn.value = i;
        let node = document.createTextNode('floors');
        floorBtn.appendChild(node);
        floorsContainer.appendChild(floorBtn);
        i++;

        floorsContainer.firstElementChild.className = 'active';

        floorBtn.addEventListener("click", timedBtn);
        let time = [];
        setInterval(timedBtn, 1500);
        function timedBtn() {
            let activeElement = document.querySelector(".active");
            if (activeElement != null) {
                for(let i = 0; i < floorNumber; i++) {
                    console.log(i);
                    setTimeout(function(){
                        activeElement.classList.remove('active');
                    }, 2000);
                    setTimeout(function(){ floorBtn.className = 'active' }, 1500);
                }
            }
        }
    }

});