Skip to content

Instantly share code, notes, and snippets.

@milesrichardson
Created November 16, 2023 12:51
Show Gist options
  • Save milesrichardson/2a2f77d4bfb19c3b28dc0c55126facd1 to your computer and use it in GitHub Desktop.
Save milesrichardson/2a2f77d4bfb19c3b28dc0c55126facd1 to your computer and use it in GitHub Desktop.
OpenAI generated this code from a UX mockup at https://makereal.tldraw.com/
generated-from-mockup.mp4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Transfer</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Additional styles if needed */
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div class="flex items-center justify-center space-x-4">
<!-- Left List -->
<div class="bg-white shadow rounded p-4">
<ul id="leftList" class="space-y-2">
<li><input type="checkbox" id="item1" value="Item 1"> <label for="item1">Item 1</label></li>
<li><input type="checkbox" id="item2" value="Item 2"> <label for="item2">Item 2</label></li>
</ul>
</div>
<!-- Action Buttons -->
<div class="flex flex-col space-y-2">
<button id="moveRight" class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 transition duration-300">Move Right</button>
<button id="moveLeft" class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 transition duration-300">Move Left</button>
</div>
<!-- Right List -->
<div class="bg-white shadow rounded p-4">
<ul id="rightList" class="space-y-2">
<li><input type="checkbox" id="itemA" value="Item A"> <label for="itemA">Item A</label></li>
<li><input type="checkbox" id="itemB" value="Item B"> <label for="itemB">Item B</label></li>
<li><input type="checkbox" id="itemC" value="Item C"> <label for="itemC">Item C</label></li>
</ul>
</div>
</div>
<script>
// JavaScript to handle moving items between lists
const leftList = document.getElementById('leftList');
const rightList = document.getElementById('rightList');
const moveRight = document.getElementById('moveRight');
const moveLeft = document.getElementById('moveLeft');
moveRight.addEventListener('click', () => {
moveSelectedItems(leftList, rightList);
});
moveLeft.addEventListener('click', () => {
moveSelectedItems(rightList, leftList);
});
function moveSelectedItems(fromList, toList) {
const selectedItems = Array.from(fromList.querySelectorAll('input[type="checkbox"]:checked'));
selectedItems.forEach(item => {
item.checked = false; // Uncheck the item
toList.appendChild(item.closest('li')); // Move the entire list item
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment