Created
May 13, 2024 05:51
-
-
Save EncodeTheCode/a6e57a29fdf600578a868e7795d83f61 to your computer and use it in GitHub Desktop.
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Delete Boxes</title> | |
<style> | |
.box { | |
width: 100px; | |
height: 100px; | |
background-color: lightblue; | |
margin: 10px; | |
display: inline-block; | |
text-align: center; | |
line-height: 100px; | |
} | |
</style> | |
</head> | |
<body> | |
<select id="boxSelect"> | |
<!-- Options will be dynamically added here --> | |
</select> | |
<button onclick="deleteBox()">Delete Box</button> | |
<button onclick="createNewBox()">Create New Box</button> | |
<label for="deleteAscending">Descending Order</label> | |
<input type="checkbox" id="deleteAscending"> | |
<div id="boxContainer"> | |
<!-- Boxes will be dynamically created here --> | |
</div> | |
<script> | |
// Function to create a unique data-id | |
class DataIdGenerator { | |
constructor() { | |
this.counter = 1; | |
} | |
generateId() { | |
let count = this.counter++; | |
let data_id = this.formatDataId(count); | |
return 'data-id-' + data_id; | |
} | |
formatDataId(number) { | |
return String(number).padStart(2, '0'); | |
} | |
} | |
// Instantiate DataIdGenerator | |
const dataIdGenerator = new DataIdGenerator(); | |
// Function to create a box with unique data-id | |
function createBox(dataId) { | |
const boxContainer = document.getElementById('boxContainer'); | |
const box = document.createElement('div'); | |
box.setAttribute('class', 'box'); | |
box.setAttribute('data-id', dataId); | |
box.textContent = dataId; | |
boxContainer.appendChild(box); | |
// Add option to select box dropdown | |
const boxSelect = document.getElementById('boxSelect'); | |
const option = document.createElement('option'); | |
option.value = dataId; | |
option.textContent = dataId; | |
boxSelect.appendChild(option); | |
} | |
// Function to create a new box with unique data-id | |
function createNewBox() { | |
let dataId; | |
// Check if data-id already exists | |
do { | |
dataId = dataIdGenerator.generateId(); | |
} while (document.querySelector(`.box[data-id="${dataId}"]`)); | |
createBox(dataId); | |
// Reorder dropdown based on checkbox state | |
reorderDropdown(); | |
} | |
// Create 10 boxes initially | |
for (let i = 0; i < 10; i++) { | |
createNewBox(); | |
} | |
// Function to delete box with specified data-id | |
function deleteBox() { | |
const boxSelect = document.getElementById('boxSelect'); | |
const boxContainer = document.getElementById('boxContainer'); | |
const selectedDataId = boxSelect.value; | |
if (selectedDataId !== '') { | |
const boxToDelete = document.querySelector(`.box[data-id="${selectedDataId}"]`); | |
if (boxToDelete) { | |
boxToDelete.parentNode.removeChild(boxToDelete); | |
// Remove option from select dropdown | |
boxSelect.remove(boxSelect.selectedIndex); | |
} else { | |
alert('Box with specified data-id not found!'); | |
} | |
} else { | |
alert('Please select a box to delete!'); | |
} | |
// Reorder dropdown based on checkbox state | |
reorderDropdown(); | |
} | |
// Function to reorder dropdown based on checkbox state | |
function reorderDropdown() { | |
document.getElementById("boxSelect").selectedIndex = 0; | |
const boxSelect = document.getElementById('boxSelect'); | |
const deleteAscending = document.getElementById('deleteAscending').checked; | |
const options = Array.from(boxSelect.options); | |
options.sort((a, b) => { | |
if (deleteAscending) { | |
return a.value.localeCompare(b.value); | |
} else { | |
return b.value.localeCompare(a.value); | |
} | |
}); | |
boxSelect.innerHTML = ''; | |
options.forEach(option => { | |
boxSelect.appendChild(option); | |
}); | |
} | |
// Function to handle checkbox change | |
document.getElementById('deleteAscending').addEventListener('change', function() { | |
reorderDropdown(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment