From c1a0b18c9d3deee4df3999b264c53d6b9166a2f9 Mon Sep 17 00:00:00 2001
From: Szanto Benjamin <szantobenjamin97@gmail.com>
Date: Sun, 8 Sep 2024 17:18:58 +0200
Subject: [PATCH] flexbox

---
 index.html | 262 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 262 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c8147b1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flexbox Gyakorlás - Bootstrap</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .flex-container {
+            border: 2px dashed #007bff;
+            padding: 20px;
+            height: 400px;
+            width: 100%;
+        }
+
+        .flex-item {
+            background-color: #007bff;
+            color: white;
+            padding: 20px;
+            margin: 10px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body class="bg-light">
+
+<div class="container my-5">
+    <h1 class="text-center mb-4">Bootstrap Flexbox Gyakorlás</h1>
+
+    <!-- Flexbox Tulajdonságok Beállítása -->
+    <div class="card p-4 mb-4">
+        <div class="row">
+            <!-- Flex-Direction -->
+            <div class="col-md-6">
+                <h4>flex-direction</h4>
+                <select id="flex-direction" class="form-select mb-3">
+                    <option value="">Nincs beállítva</option>
+                    <option value="flex-row">flex-row</option>
+                    <option value="flex-row-reverse">flex-row-reverse</option>
+                    <option value="flex-column">flex-column</option>
+                    <option value="flex-column-reverse">flex-column-reverse</option>
+                </select>
+            </div>
+
+            <!-- Flex-Wrap -->
+            <div class="col-md-6">
+                <h4>flex-wrap</h4>
+                <select id="flex-wrap" class="form-select mb-3">
+                    <option value="">Nincs beállítva</option>
+                    <option value="flex-nowrap">flex-nowrap</option>
+                    <option value="flex-wrap">flex-wrap</option>
+                    <option value="flex-wrap-reverse">flex-wrap-reverse</option>
+                </select>
+            </div>
+
+            <!-- Justify-Content -->
+            <div class="col-md-6">
+                <h4>justify-content</h4>
+                <select id="justify-content" class="form-select mb-3">
+                    <option value="">Nincs beállítva</option>
+                    <option value="justify-content-start">justify-content-start</option>
+                    <option value="justify-content-center">justify-content-center</option>
+                    <option value="justify-content-end">justify-content-end</option>
+                    <option value="justify-content-around">justify-content-around</option>
+                    <option value="justify-content-between">justify-content-between</option>
+                    <option value="justify-content-evenly">justify-content-evenly</option>
+                </select>
+            </div>
+
+            <!-- Align-Items -->
+            <div class="col-md-6">
+                <h4>align-items</h4>
+                <select id="align-items" class="form-select mb-3">
+                    <option value="">Nincs beállítva</option>
+                    <option value="align-items-start">align-items-start</option>
+                    <option value="align-items-center">align-items-center</option>
+                    <option value="align-items-end">align-items-end</option>
+                    <option value="align-items-stretch">align-items-stretch</option>
+                </select>
+            </div>
+
+            <!-- Align-Content -->
+            <div class="col-md-6">
+                <h4>align-content</h4>
+                <select id="align-content" class="form-select mb-3">
+                    <option value="">Nincs beállítva</option>
+                    <option value="align-content-start">align-content-start</option>
+                    <option value="align-content-center">align-content-center</option>
+                    <option value="align-content-end">align-content-end</option>
+                    <option value="align-content-around">align-content-around</option>
+                    <option value="align-content-between">align-content-between</option>
+                    <option value="align-content-stretch">align-content-stretch</option>
+                </select>
+            </div>
+
+            <!-- Elem Szám Növelése / Csökkentése -->
+            <div class="col-md-6">
+                <h4>Elemek száma</h4>
+                <div class="input-group mb-3">
+                    <button class="btn btn-outline-secondary" type="button" id="decrease-items">-</button>
+                    <input type="text" class="form-control text-center" id="item-count" value="3" readonly>
+                    <button class="btn btn-outline-secondary" type="button" id="increase-items">+</button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <!-- Align-self beállítások az egyes elemekhez -->
+    <div class="card p-4 mb-4">
+        <h4>Align-self az egyes elemekhez:</h4>
+        <div id="align-self-options">
+            <!-- Dinamikusan generált elemek itt jelennek meg -->
+        </div>
+    </div>
+
+    <!-- Flexbox Elrendezés -->
+    <div class="flex-container d-flex " id="flex-container">
+        <div class="flex-item">1</div>
+        <div class="flex-item">2</div>
+        <div class="flex-item">3</div>
+    </div>
+
+    
+
+    <!-- Kód megjelenítése -->
+    <div class="card p-4 mt-4">
+        <h4>Generált Kód:</h4>
+        <pre id="generated-code">
+&lt;div class="d-flex"&gt;
+    &lt;div class="flex-item"&gt;1&lt;/div&gt;
+    &lt;div class="flex-item"&gt;2&lt;/div&gt;
+    &lt;div class="flex-item"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+        </pre>
+    </div>
+</div>
+
+<script>
+    const flexDirectionSelect = document.getElementById('flex-direction');
+    const flexWrapSelect = document.getElementById('flex-wrap');
+    const justifyContentSelect = document.getElementById('justify-content');
+    const alignItemsSelect = document.getElementById('align-items');
+    const alignContentSelect = document.getElementById('align-content');
+    const flexContainer = document.getElementById('flex-container');
+    const generatedCodePre = document.getElementById('generated-code');
+    const itemCountInput = document.getElementById('item-count');
+    const increaseItemsButton = document.getElementById('increase-items');
+    const decreaseItemsButton = document.getElementById('decrease-items');
+    const alignSelfOptionsContainer = document.getElementById('align-self-options');
+
+    let itemCount = 3;
+
+    function createAlignSelfSelect(itemIndex) {
+        const select = document.createElement('select');
+        select.classList.add('form-select', 'mb-3', 'align-self-select');
+        select.setAttribute('data-item-index', itemIndex);
+
+        const options = ['Nincs beállítva', 'align-self-start', 'align-self-center', 'align-self-end', 'align-self-stretch'];
+        options.forEach(optionText => {
+            const option = document.createElement('option');
+            option.value = optionText === 'Nincs beállítva' ? '' : optionText;
+            option.textContent = optionText;
+            select.appendChild(option);
+        });
+
+        const label = document.createElement('label');
+        label.textContent = `Elem ${itemIndex} align-self:`;
+        label.classList.add('m-3');
+        label.appendChild(select);
+
+        return label;
+    }
+
+    function updateAlignSelfOptions() {
+        alignSelfOptionsContainer.innerHTML = ''; // Kiüríti az előző elemeket
+        for (let i = 1; i <= itemCount; i++) {
+            alignSelfOptionsContainer.appendChild(createAlignSelfSelect(i));
+        }
+
+        // Minden align-self select-hez eseményfigyelőt rendelünk
+        const alignSelfSelects = document.querySelectorAll('.align-self-select');
+        alignSelfSelects.forEach(select => {
+            select.addEventListener('change', updateFlexbox);
+        });
+    }
+
+    function updateFlexbox() {
+        // Olvassa a kiválasztott értékeket, ha egy érték üres (""), az azt jelenti, hogy nincs osztály
+        const flexDirectionValue = ((flexDirectionSelect.value || '')==='')?'':flexDirectionSelect.value+" ";
+        const flexWrapValue = ((flexWrapSelect.value || '')==='')?'':flexWrapSelect.value+" ";
+        const justifyContentValue = ((justifyContentSelect.value || '')==='')?'':justifyContentSelect.value+" ";
+        const alignItemsValue = ((alignItemsSelect.value || '')==='')?'':alignItemsSelect.value+" ";
+        const alignContentValue = ((alignContentSelect.value || '')==='')?'':alignContentSelect.value+" ";
+
+        // Frissíti a flex-container osztályait
+        flexContainer.className = `d-flex flex-container ${flexDirectionValue} ${flexWrapValue} ${justifyContentValue} ${alignItemsValue} ${alignContentValue}`;
+
+        // Frissíti a flex-itemek align-self tulajdonságát
+        const flexItems = flexContainer.querySelectorAll('.flex-item');
+        flexItems.forEach((item, index) => {
+            const alignSelfSelect = document.querySelector(`.align-self-select[data-item-index="${index + 1}"]`);
+            const alignSelfValue = alignSelfSelect ? alignSelfSelect.value : '';
+            item.className = `flex-item ${alignSelfValue}`;
+        });
+
+        // Frissíti a generált kódot
+        let itemsHtml = '';
+        for (let i = 1; i <= itemCount; i++) {
+            const alignSelfSelect = document.querySelector(`.align-self-select[data-item-index="${i}"]`);
+            const alignSelfValue = alignSelfSelect ? alignSelfSelect.value : '';
+            itemsHtml += `    <div class="flex-item ${alignSelfValue}`.trimEnd()+`">${i}</div>\n`;
+        }
+
+        generatedCodePre.textContent = 
+((`<div class="d-flex ${flexDirectionValue}${flexWrapValue}${justifyContentValue}${alignItemsValue}${alignContentValue}`).trim()) + `">
+${itemsHtml}</div>`;
+    }
+
+    function updateItemCount() {
+        // Frissíti az itemeket a flex-containerben
+        flexContainer.innerHTML = '';
+        for (let i = 1; i <= itemCount; i++) {
+            const newItem = document.createElement('div');
+            newItem.className = 'flex-item';
+            newItem.textContent = i;
+            flexContainer.appendChild(newItem);
+        }
+        updateAlignSelfOptions(); // Frissíti az align-self opciókat
+        updateFlexbox();
+    }
+
+    // Eseményfigyelők a select elemekhez
+    flexDirectionSelect.addEventListener('change', updateFlexbox);
+    flexWrapSelect.addEventListener('change', updateFlexbox);
+    justifyContentSelect.addEventListener('change', updateFlexbox);
+    alignItemsSelect.addEventListener('change', updateFlexbox);
+    alignContentSelect.addEventListener('change', updateFlexbox);
+
+    // Eseményfigyelők az elem számának növeléséhez és csökkentéséhez
+    increaseItemsButton.addEventListener('click', () => {
+        if (itemCount < 30) {
+            itemCount++;
+            itemCountInput.value = itemCount;
+            updateItemCount();
+        }
+    });
+
+    decreaseItemsButton.addEventListener('click', () => {
+        if (itemCount > 1) {
+            itemCount--;
+            itemCountInput.value = itemCount;
+            updateItemCount();
+        }
+    });
+
+    // Inicializálás
+    updateItemCount();
+</script>
+
+</body>
+</html>
