Created
November 16, 2023 12:51
-
-
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/
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>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