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: 80%; 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

button {
    margin: 5px 0;
    background-color: #054587;
    color: white;
    padding: 5px;
    border: none;
}


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

.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);
        let linebreak = document.createElement('br');
        floorsContainer.appendChild(linebreak);
        floorsContainer.appendChild(floorBtn);
        i++;


        floorBtn.addEventListener("click", activeElement);

        function activeElement(e) {
            let activeElement = document.querySelector(".active");
            if (activeElement != null) {
                activeElement.classList.remove("active");
            }
            e.target.className = "active";
            setTimeout(this.className = "active", 3000);

            // if (floorBtn.classList.contains('active')){
            //     let thisBtn = this.className = "active";
            //     for (let i = 0; i < floorsContainer.length; i++) {
            //         alert(1);
            //         setTimeout(thisBtn, 3000)
            //     }
            // }
        }
    }

});