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>