sedadla

3 years ago · 0049d65b9a
1 changed files with 79 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V povětří</title>
    <style>
        .letadlo {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        .letadlo > div {
            border: 1px solid gray;
        }
        .letadlo > div:hover {
            background-color: chartreuse;
            cursor: pointer;
        }
        .sedadlo-vyber {
            background-color: aquamarine;
        }
        .letadlo > div.sedadlo-vyber:hover {
            background-color: aquamarine;
        }
    </style>
 </head>
 <body>
    <form action="">
        <label for="volba-tridy">Volba třídy</label>
        <select name="trida" id="volba-tridy">
            <option value="E">Ekonomická</option>
            <option value="B">Business</option>
        </select>
        <label for="pocet-cestujicich">Počet cestujích</label>
        <input id="pocet-cestujicich" value="1" type="number" min="1" max="9" step="1">
        <div class="letadlo">
            <div>B1</div>
            <div>B2</div>
            <div>B3</div>
            <div>B4</div>
            <div>E1</div>
            <div>E2</div>
            <div>E3</div>
            <div>E4</div>
        </div>
    </form>
    <script>
        let sedadla = document.querySelectorAll(".letadlo > div");
        let volbaTridy = document.querySelector("#volba-tridy");
        volbaTridy.addEventListener("change", function() {
            for (let index = 0; index < sedadla.length; index++) {
                const element = sedadla[index];
                element.classList.remove("sedadlo-vyber");
            }
        });
        for (let index = 0; index < sedadla.length; index++) {
            const seat = sedadla[index];
            seat.addEventListener("click", function() {
                let formdata = new FormData(document.querySelector("form"));
                if (this.innerText.indexOf(formdata.get("trida")) == 0) {
                    this.classList.toggle("sedadlo-vyber");
                }
            });
        }
    </script>
 </body>
 </html>