-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit c1a0b18
Showing
1 changed file
with
262 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/[email protected]/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"> | ||
| <div class="d-flex"> | ||
| <div class="flex-item">1</div> | ||
| <div class="flex-item">2</div> | ||
| <div class="flex-item">3</div> | ||
| </div> | ||
| </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> |