Ordered List Editor
A tool for creating, editing, saving an ordered list of objects.
Prompt
Create a tool for creating, rearranging, expanding, and reducing an ordered list of objects. The tool must display both the current state of the list as well as the original list, with changes called out in some way. Generate random objects for the initial state.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Playground</title>
<!-- Optional but convenient: SortableJS for drag-and-drop re-ordering -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<style>
body{
font-family:Arial,Helvetica,sans-serif;
margin:0;
padding:0 1rem 2rem;
background:#f7f7f7;
}
h2{
margin-top:1.5rem;
}
.lists{
display:flex;
flex-wrap:wrap;
gap:2rem;
}
ul{
list-style-position:inside;
padding:0.5rem;
background:#fff;
border:1px solid #ccc;
min-width:240px;
}
li{
margin:0.25rem 0;
padding:0.25rem 0.5rem;
cursor:grab;
display:flex;
justify-content:space-between;
align-items:center;
border-radius:3px;
}
li span.text{
flex:1 1 auto;
}
button.delete{
margin-left:0.5rem;
background:#eee;
border:none;
color:#900;
cursor:pointer;
font-size:1rem;
width:1.6rem;
height:1.6rem;
border-radius:3px;
}
button.delete:hover{
background:#fdd;
}
/* change indicators */
.removed{
text-decoration:line-through;
color:#b00;
}
.new{
background:#c6f7c6;
}
.moved{
background:#fff2aa;
}
/* control panel */
.controls{
margin-top:0.5rem;
display:flex;
flex-wrap:wrap;
gap:0.5rem;
}
.controls input[type=text]{
flex:1 1 auto;
min-width:180px;
padding:0.3rem 0.4rem;
}
.controls button{
padding:0.3rem 0.7rem;
font-size:0.9rem;
cursor:pointer;
border:1px solid #666;
background:#fafafa;
border-radius:3px;
}
.controls button:hover{
background:#e8e8e8;
}
footer{
margin-top:2rem;
font-size:0.8rem;
color:#666;
}
</style>
</head>
<body>
<h1>Ordered List Playground</h1>
<div class="lists">
<div>
<h2>Current List</h2>
<ul id="currentList"></ul>
<div class="controls">
<input id="newItemInput" type="text" placeholder="New item text…">
<button id="addBtn">Add</button>
<button id="randomBtn">Add Random</button>
<button id="resetBtn">Reset</button>
</div>
<p style="font-size:0.85rem">Drag items to reorder, or use the ✕ button to delete.</p>
</div>
<div>
<h2>Original List (read-only)</h2>
<ul id="originalList"></ul>
<p style="font-size:0.85rem">
Legend: <span class="new">added</span>,
<span class="removed">removed</span>,
<span class="moved">moved</span>
</p>
</div>
</div>
<footer>
Changes are highlighted compared with the list as it was first generated when the page loaded
(or when you last pressed “Reset”). All logic runs fully in your browser.
</footer>
<script>
// ---------- Random object generator ----------
const adjectives = ["Red","Big","Tiny","Shiny","Swift","Lazy","Brave","Spotted","Glowing","Wild"];
const nouns = ["Fox","Star","Apple","Robot","Falcon","River","Mountain","Gem","Key","Dragon"];
let idCounter = 1;
function randomName(){
const adj = adjectives[Math.floor(Math.random()*adjectives.length)];
const noun = nouns[Math.floor(Math.random()*nouns.length)];
return `${adj} ${noun}`;
}
function makeRandomObject(){
return {id: idCounter++, text: randomName()};
}
// ---------- Data store ----------
let originalList = [];
let currentList = [];
// ---------- DOM refs ----------
const ulOriginal = document.getElementById('originalList');
const ulCurrent = document.getElementById('currentList');
const newInput = document.getElementById('newItemInput');
const addBtn = document.getElementById('addBtn');
const randomBtn = document.getElementById('randomBtn');
const resetBtn = document.getElementById('resetBtn');
// ---------- Initialize ----------
function init(){
originalList = Array.from({length:5}, makeRandomObject);
currentList = JSON.parse(JSON.stringify(originalList)); // deep-ish copy
renderLists();
updateDiff();
}
init();
// ---------- Render ----------
function renderLists(){
// helper to build li
function buildLi(obj, isCurrent){
const li = document.createElement('li');
li.dataset.id = obj.id;
const span = document.createElement('span');
span.textContent = obj.text;
span.className = "text";
li.appendChild(span);
if(isCurrent){
const del = document.createElement('button');
del.textContent = "✕";
del.className = "delete";
del.addEventListener('click', () => {
currentList = currentList.filter(o => o.id !== obj.id);
renderLists();
updateDiff();
});
li.appendChild(del);
}
return li;
}
// original
ulOriginal.innerHTML = "";
originalList.forEach(obj => ulOriginal.appendChild(buildLi(obj,false)));
// current
ulCurrent.innerHTML = "";
currentList.forEach(obj => ulCurrent.appendChild(buildLi(obj,true)));
// reattach sortable
if(ulCurrent._sortable){ ulCurrent._sortable.destroy(); }
ulCurrent._sortable = Sortable.create(ulCurrent,{
animation:150,
onEnd:syncCurrentFromDOM
});
}
// ---------- Sync array after drag ----------
function syncCurrentFromDOM(){
const ordering = Array.from(ulCurrent.children).map(li => parseInt(li.dataset.id,10));
currentList.sort((a,b) => ordering.indexOf(a.id) - ordering.indexOf(b.id));
updateDiff();
}
// ---------- Diff logic ----------
function updateDiff(){
// map ids
const originalIds = originalList.map(o => o.id);
const currentIds = currentList.map(o => o.id);
// clear classes
Array.from(ulOriginal.children).forEach(li => li.className="");
Array.from(ulCurrent .children).forEach(li => li.className="");
// mark removed in original
Array.from(ulOriginal.children).forEach(li =>{
const id = parseInt(li.dataset.id,10);
if(!currentIds.includes(id)){
li.classList.add('removed');
}else{
// check moved
const origIndex = originalIds.indexOf(id);
const curIndex = currentIds.indexOf(id);
if(origIndex !== curIndex){
li.classList.add('moved');
}
}
});
// mark new and moved in current
Array.from(ulCurrent.children).forEach(li =>{
const id = parseInt(li.dataset.id,10);
if(!originalIds.includes(id)){
li.classList.add('new');
}else{
// moved?
const origIndex = originalIds.indexOf(id);
const curIndex = currentIds.indexOf(id);
if(origIndex !== curIndex){
li.classList.add('moved');
}
}
});
}
// ---------- Event handlers ----------
addBtn.addEventListener('click',()=> {
const text = newInput.value.trim();
if(!text) return;
currentList.push({id:idCounter++, text});
newInput.value="";
renderLists();
updateDiff();
newInput.focus();
});
randomBtn.addEventListener('click',()=>{
currentList.push(makeRandomObject());
renderLists();
updateDiff();
});
resetBtn.addEventListener('click',()=>{
currentList = JSON.parse(JSON.stringify(originalList));
renderLists();
updateDiff();
newInput.focus();
});
newInput.addEventListener('keyup',e=>{
if(e.key==="Enter") addBtn.click();
});
</script>
</body>
</html>
```Drag to resize
# Ordered List Management Tool
I'll create a tool that allows users to manage an ordered list with full CRUD (Create, Rearrange, Update, Delete) functionality. The interface will clearly show both the original list and current state with visual indicators for changes.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List Management Tool</title>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
header {
background: #4a6fa5;
color: white;
padding: 25px;
text-align: center;
border-bottom: 1px solid #3d5a80;
}
h1 {
font-weight: 600;
margin-bottom: 10px;
}
.subtitle {
font-weight: 300;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.main-content {
display: flex;
padding: 25px;
gap: 25px;
}
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
}
.panel {
background: #ffffff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
flex: 1;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
margin-bottom: 20px;
}
.panel-title {
font-size: 1.4rem;
color: #3d5a80;
font-weight: 600;
}
.list {
min-height: 300px;
}
.list-item {
display: flex;
align-items: center;
padding: 12px 16px;
background: #f8f9fd;
margin-bottom: 12px;
border-radius: 8px;
border: 1px solid #e5e9f2;
cursor: grab;
transition: all 0.2s;
position: relative;
}
.list-item:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
border-color: #c3cfe2;
}
.list-item.dragging {
opacity: 0.6;
border: 1px dashed #4a6fa5;
}
.item-handle {
color: #888;
font-size: 1.2rem;
margin-right: 15px;
cursor: move;
}
.item-content {
flex-grow: 1;
font-size: 1rem;
}
.original-list .item-content {
padding-right: 20px;
}
.status-indicator {
font-size: 0.85rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
background: #eee;
margin-left: 10px;
}
.status-added {
background: #d4edda;
color: #155724;
}
.status-removed {
background: #f8d7da;
color: #721c24;
}
.status-moved {
background: #fff3cd;
color: #856404;
}
.controls {
background: #f8f9fd;
padding: 25px;
border-top: 1px solid #e5e9f2;
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.btn-primary {
background: #4a6fa5;
color: white;
}
.btn-secondary {
background: white;
color: #4a6fa5;
border: 2px solid #4a6fa5;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.btn-primary:hover {
background: #3d5a80;
}
.btn-secondary:hover {
background: #f0f4f9;
}
.counter {
width: 28px;
height: 28px;
background: #4a6fa5;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
font-weight: bold;
margin-right: 10px;
}
.reorder-instruction {
text-align: center;
color: #666;
padding: 15px 0;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Ordered List Management Tool</h1>
<p class="subtitle">Create, rearrange, add, and remove list items. Compare the current state with the original.</p>
</header>
<div class="main-content">
<div class="panel">
<div class="panel-header">
<div class="panel-title">Original List</div>
</div>
<div id="original-list" class="list"></div>
</div>
<div class="panel">
<div class="panel-header">
<div class="panel-title">Current List</div>
<div id="item-count"></div>
</div>
<p class="reorder-instruction">
<i class="fas fa-arrows-alt"></i> Drag items to reorder
</p>
<div id="current-list" class="list"></div>
</div>
</div>
<div class="controls">
<button id="add-btn" class="btn btn-primary">
<i class="fas fa-plus"></i> Add Item
</button>
<button id="add-multiple-btn" class="btn btn-primary">
<i class="fas fa-layer-group"></i> Add 5 Items
</button>
<button id="remove-btn" class="btn btn-secondary">
<i class="fas fa-minus"></i> Remove Last
</button>
<button id="reset-btn" class="btn btn-secondary">
<i class="fas fa-undo"></i> Reset to Original
</button>
</div>
</div>
<script>
// Initial product list for the demo
const initialProducts = [
"Wireless Headphones",
"Smartphone",
"Laptop",
"Bluetooth Speaker",
"Smart Watch",
"Camera",
"Tablet",
"Gaming Console"
];
// Original list (will never change)
let originalList = [];
// Current list (can be modified)
let currentList = [];
// DOM elements
const originalListEl = document.getElementById('original-list');
const currentListEl = document.getElementById('current-list');
const itemCountEl = document.getElementById('item-count');
const addBtn = document.getElementById('add-btn');
const addMultipleBtn = document.getElementById('add-multiple-btn');
const removeBtn = document.getElementById('remove-btn');
const resetBtn = document.getElementById('reset-btn');
// Initialize lists
function initializeLists() {
// Create the original list with random products
originalList = [...initialProducts];
// Duplicate for current list
currentList = [...initialProducts];
renderLists();
}
// Render both lists
function renderLists() {
renderOriginalList();
renderCurrentList();
}
// Render the original list
function renderOriginalList() {
originalListEl.innerHTML = '';
originalList.forEach((item, index) => {
const listItem = document.createElement('div');
listItem.className = 'list-item';
// Check if this item still exists in current list
let status = '';
let statusClass = '';
if (!currentList.includes(item)) {
status = 'Removed';
statusClass = 'status-removed';
}
listItem.innerHTML = `
<div class="counter">${index + 1}</div>
<div class="item-content">${item}</div>
${status ? `<div class="status-indicator ${statusClass}">${status}</div>` : ''}
`;
originalListEl.appendChild(listItem);
});
}
// Render the current list with drag and drop
function renderCurrentList() {
currentListEl.innerHTML = '';
itemCountEl.textContent = `${currentList.length} items`;
currentList.forEach((item, currentIndex) => {
const listItem = document.createElement('div');
listItem.className = 'list-item';
listItem.setAttribute('data-item', item);
let status = '';
let statusClass = '';
// Original index for this item
let originalIndex = originalList.indexOf(item);
// Status based on changes
if (originalIndex === -1) {
status = 'Added';
statusClass = 'status-added';
} else if (originalIndex !== currentIndex) {
status = `Moved from ${originalIndex + 1}`;
statusClass = 'status-moved';
}
listItem.innerHTML = `
<div class="item-handle"><i class="fas fa-bars"></i></div>
<div class="counter">${currentIndex + 1}</div>
<div class="item-content">${item}</div>
${status ? `<div class="status-indicator ${statusClass}">${status}</div>` : ''}
`;
currentListEl.appendChild(listItem);
});
// Set up Sortable for drag and drop
new Sortable(currentListEl, {
animation: 150,
handle: '.item-handle',
onUpdate: function(evt) {
// Reorder our array when items are dragged
const movedItem = currentList[evt.oldIndex];
currentList.splice(evt.oldIndex, 1);
currentList.splice(evt.newIndex, 0, movedItem);
renderLists();
}
});
}
// Add a random item to the list
function addNewItem() {
const items = [
"Wireless Earbuds",
"Fitness Tracker",
"External Hard Drive",
"VR Headset",
"Drones",
"Smart Home Hub",
"Digital Camera",
"USB Cable",
"Power Bank",
"Computer Monitor",
"Keyboard",
"Mouse"
];
// Add a random item
const randomItem = items[Math.floor(Math.random() * items.length)];
currentList.push(randomItem);
renderLists();
}
// Add multiple items to the list
function addMultipleItems() {
for (let i = 0; i < 5; i++) {
addNewItem();
}
}
// Remove the last item from the list
function removeLastItem() {
if (currentList.length > 0) {
currentList.pop();
renderLists();
}
}
// Reset to original list
function resetList() {
currentList = [...originalList];
renderLists();
}
// Event Listeners
addBtn.addEventListener('click', addNewItem);
addMultipleBtn.addEventListener('click', addMultipleItems);
removeBtn.addEventListener('click', removeLastItem);
resetBtn.addEventListener('click', resetList);
// Initialize the app
initializeLists();
</script>
</body>
</html>
```
## Features of the Ordered List Management Tool
1. **Visual Presentation**:
- Two side-by-side panels showing the original and current lists
- Clean, modern design with responsive layout
- Visual status indicators for changes (added, removed, moved)
2. **List Management Features**:
- **Create/Add**: Add single items or blocks of 5 items
- **Rearrange**: Drag and drop items to reorder
- **Reduce/Remove**: Remove the last item
- **Reset**: Restore the list to original state
3. **Change Visualization**:
- Added items shown with green indicator
- Removed items shown in the original list with red indicator
- Moved items show original position in indicator
4. **User Experience Enhancements**:
- Animated visual feedback during actions
- Item counter showing current item count
- Clear drag handles for reordering
- Responsive design for mobile and desktop
This tool provides an intuitive way to manage ordered lists while clearly tracking all changes made relative to the original state.Drag to resize
Here is a self-contained tool for managing an ordered list. It generates a random initial list of tasks and allows you to add, remove, and reorder items. The view on the left shows the original, unchanging list, while the view on the right shows your current, editable list. Changes are highlighted with colors for clarity.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List Manager</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 1.5rem;
background-color: #f8f9fa;
color: #212529;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #343a40;
margin-bottom: 2rem;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
max-width: 1200px;
justify-content: center;
}
.list-column {
flex: 1;
min-width: 300px;
max-width: 550px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
padding: 1.5rem;
}
.list-column h2 {
margin-top: 0;
color: #495057;
border-bottom: 2px solid #e9ecef;
padding-bottom: 0.75rem;
}
ol {
padding-left: 25px;
list-style-type: decimal;
}
li {
display: flex;
align-items: center;
padding: 0.75rem;
margin-bottom: 0.5rem;
border-radius: 6px;
border: 1px solid #dee2e6;
background-color: #fff;
transition: background-color 0.2s ease;
}
li .content {
flex-grow: 1;
}
.controls {
margin-left: 1rem;
display: flex;
gap: 0.5rem;
opacity: 0;
transition: opacity 0.2s ease;
}
#current-list-container li:hover .controls {
opacity: 1;
}
.controls button {
border: none;
background-color: #f1f3f5;
color: #495057;
border-radius: 4px;
width: 28px;
height: 28px;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.controls button:hover {
background-color: #e9ecef;
color: #212529;
}
.controls button.delete-btn:hover {
background-color: #f8d7da;
color: #721c24;
}
/* Change Indicators */
.added {
background-color: #d4edda; /* Light green */
border-color: #c3e6cb;
}
.removed {
background-color: #f8d7da; /* Light red */
border-color: #f5c6cb;
text-decoration: line-through;
color: #721c24;
}
.moved {
background-color: #fff3cd; /* Light yellow */
border-color: #ffeeba;
}
.add-item-form {
margin-top: 1.5rem;
display: flex;
gap: 0.5rem;
}
.add-item-form input {
flex-grow: 1;
padding: 0.5rem;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
}
.add-item-form button {
padding: 0.5rem 1rem;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.add-item-form button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>List Manipulation Tool</h1>
<div class="container">
<div class="list-column">
<h2>Original List</h2>
<ol id="original-list"></ol>
</div>
<div class="list-column" id="current-list-container">
<h2>Current List</h2>
<ol id="current-list"></ol>
<form id="add-item-form" class="add-item-form">
<input type="text" id="new-item-input" placeholder="Enter new item text...">
<button type="submit">Add Item</button>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- DATA ---
let originalList = [];
let currentList = [];
// --- DOM ELEMENTS ---
const originalListEl = document.getElementById('original-list');
const currentListEl = document.getElementById('current-list');
const addItemForm = document.getElementById('add-item-form');
const newItemInput = document.getElementById('new-item-input');
// --- UTILITY FUNCTIONS ---
const generateUniqueId = () => `id_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
const generateRandomItems = (count) => {
const adjectives = ["Quick", "Lazy", "Sleepy", "Noisy", "Hungry", "Brave", "Calm", "Eager"];
const nouns = ["Fox", "Dog", "Cat", "Lion", "Tiger", "Bear", "Wolf", "Rabbit"];
const verbs = ["jumps over", "runs past", "naps near", "chases", "watches", "follows", "ignores"];
const items = new Set();
while (items.size < count) {
const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
const noun = nouns[Math.floor(Math.random() * nouns.length)];
const verb = verbs[Math.floor(Math.random() * verbs.length)];
const otherNoun = nouns[Math.floor(Math.random() * nouns.length)];
items.add(`The ${adj} ${noun} ${verb} the ${otherNoun}`);
}
return Array.from(items).map(text => ({ id: generateUniqueId(), value: text }));
};
// --- RENDER FUNCTIONS ---
const renderLists = () => {
renderOriginalList();
renderCurrentList();
};
const renderOriginalList = () => {
originalListEl.innerHTML = '';
const currentIds = new Set(currentList.map(item => item.id));
originalList.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<span class="content">${item.value}</span>`;
if (!currentIds.has(item.id)) {
li.classList.add('removed');
}
originalListEl.appendChild(li);
});
};
const renderCurrentList = () => {
currentListEl.innerHTML = '';
const originalIdMap = new Map(originalList.map((item, index) => [item.id, index]));
currentList.forEach((item, index) => {
const li = document.createElement('li');
li.dataset.index = index;
li.dataset.id = item.id;
const originalIndex = originalIdMap.get(item.id);
if (originalIndex === undefined) {
li.classList.add('added');
} else if (originalIndex !== index) {
li.classList.add('moved');
}
li.innerHTML = `
<span class="content">${item.value}</span>
<div class="controls">
<button class="up-btn" title="Move Up" ${index === 0 ? 'disabled' : ''}>▲</button>
<button class="down-btn" title="Move Down" ${index === currentList.length - 1 ? 'disabled' : ''}>▼</button>
<button class="delete-btn" title="Delete">✖</button>
</div>
`;
currentListEl.appendChild(li);
});
};
// --- EVENT HANDLERS / ACTIONS ---
const handleAddItem = (e) => {
e.preventDefault();
const text = newItemInput.value.trim();
if (text) {
const newItem = {
id: generateUniqueId(),
value: text
};
currentList.push(newItem);
newItemInput.value = '';
renderLists();
}
};
const handleListClick = (e) => {
const target = e.target;
const li = target.closest('li');
if (!li) return;
const index = parseInt(li.dataset.index, 10);
if (target.classList.contains('delete-btn')) {
currentList.splice(index, 1);
} else if (target.classList.contains('up-btn')) {
if (index > 0) {
[currentList[index], currentList[index - 1]] = [currentList[index - 1], currentList[index]];
}
} else if (target.classList.contains('down-btn')) {
if (index < currentList.length - 1) {
[currentList[index], currentList[index + 1]] = [currentList[index + 1], currentList[index]];
}
}
renderLists();
};
// --- INITIALIZATION ---
const init = () => {
originalList = generateRandomItems(5);
// Deep copy for the current list so modifications don't affect the original
currentList = JSON.parse(JSON.stringify(originalList));
renderLists();
addItemForm.addEventListener('submit', handleAddItem);
currentListEl.addEventListener('click', handleListClick);
};
init();
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ordered List Manipulation Tool</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
background: #f5f7fa;
color: #222;
}
.container {
max-width: 900px;
margin: 40px auto 0 auto;
background: #fff;
padding: 2em 2.5em 2em 2.5em;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
display: flex;
gap: 2em;
flex-wrap: wrap;
}
h2 {
margin-top: 0;
margin-bottom: 0.6em;
font-weight: 700;
font-size: 1.1em;
letter-spacing: 2px;
text-transform: uppercase;
color: #354153
}
.list-view {
flex: 1 1 340px;
min-width: 340px;
}
ol {
padding-left: 1.8em;
}
.list-item {
display: flex;
align-items: center;
margin-bottom: 7px;
gap: 7px;
position: relative;
}
.item-buttons button {
margin-right: 3px;
background: #ededed;
border: none;
border-radius: 4px;
padding: 2px 7px;
cursor: pointer;
transition: background 0.1s;
font-size: 1em;
}
.item-buttons button:hover {
background: #dae6f4;
}
.added {
background: #e4fae8;
border-left: 3px solid #1bb563;
}
.removed {
color: #bbb;
text-decoration: line-through;
background: #ffe8eb;
border-left: 3px solid #dd465c;
}
.moved {
background: #eafdff;
border-left: 3px solid #20bad8;
}
.changed {
font-style: italic;
color: #ad710a;
background: #fff7e3;
border-left: 3px solid #f7ac1d;
}
.highlight {
animation: highlight 0.6s;
}
@keyframes highlight {
0% { background: #ffffcc; }
100% { background: inherit; }
}
.list-controls {
margin-bottom: 1em;
margin-top: -5px;
}
.list-controls button {
background: #234af1;
color: #fff;
border: none;
border-radius: 3px;
padding: 4px 10px;
margin-right: 8px;
font-size: 0.95em;
cursor: pointer;
transition: background 0.1s;
}
.list-controls button:hover {
background: #1254b7;
}
.input-row {
display: flex;
gap: 9px;
margin-bottom: 6px;
align-items: center;
}
.input-row input {
border: 1px solid #bbb;
border-radius: 3px;
padding: 3px 6px;
font-size: 1em;
}
.diff-legend {
font-size: 0.93em;
margin-top: 0.25em;
display: flex;
gap: 1.5em;
flex-wrap: wrap;
align-items: center;
}
.legend-box {
display: inline-block;
min-width: 18px;
min-height: 12px;
margin-right: 5px;
border-radius: 2px;
vertical-align: middle;
}
.legend-added { background: #e4fae8; border-left: 3px solid #1bb563; }
.legend-removed {background: #ffe8eb; border-left: 3px solid #dd465c; }
.legend-moved { background: #eafdff; border-left: 3px solid #20bad8;}
.legend-changed { background: #fff7e3; border-left: 3px solid #f7ac1d;}
.tooltip {
border-bottom: 1px dotted #888;
cursor: help;
text-decoration: none;
}
@media (max-width: 700px) {
.container { flex-direction: column; }
.list-view { min-width: unset; }
}
</style>
</head>
<body>
<div class="container">
<div class="list-view">
<h2>Current List</h2>
<div class="list-controls">
<button id="addRandBtn">Add Random</button>
<button id="resetBtn">Reset</button>
</div>
<ol id="currentList"></ol>
<div class="diff-legend">
<span><span class="legend-box legend-added"></span> Added</span>
<span><span class="legend-box legend-removed"></span> Removed</span>
<span><span class="legend-box legend-moved"></span> Moved</span>
<span><span class="legend-box legend-changed"></span> Changed</span>
</div>
</div>
<div class="list-view">
<h2>Original List</h2>
<ol id="originalList"></ol>
</div>
</div>
<script>
function randomName() {
const firsts = ["Alice", "Bob", "Charlie", "Diana", "Eve", "Frank", "Grace", "Hank", "Ivy", "Jack", "Kim", "Liam"];
const lasts = ["Brown", "Smith", "Wilson", "Taylor", "Lee", "Moore", "King", "Turner", "Hall", "Clark"];
return firsts[Math.floor(Math.random()*firsts.length)] + " " + lasts[Math.floor(Math.random()*lasts.length)];
}
function randomAge() {
return Math.floor(Math.random()*40) + 18;
}
function randomColor() {
const colors = ["Red", "Blue", "Green", "Violet", "Yellow", "Pink", "Cyan", "Orange", "Purple", "Gray"];
return colors[Math.floor(Math.random()*colors.length)];
}
function randomPerson() {
return {
id: Math.random().toString(36).slice(2, 10) + String(Date.now()).slice(-5),
name: randomName(),
age: randomAge(),
color: randomColor(),
}
}
// ---------- DATA ----------
let originalList = [];
let currentList = [];
function deepCopy(obj) { return JSON.parse(JSON.stringify(obj)); };
// ----------- INIT -----------
function genInitialList(count=6) {
const arr = [];
for(let i=0;i<count;i++) arr.push(randomPerson());
return arr;
}
function resetLists() {
originalList = genInitialList(5+Math.floor(Math.random()*3));
currentList = deepCopy(originalList);
renderAll();
}
resetLists();
// ------------ DIFF UTILS -----------
function isSamePerson(a, b) { return a && b && a.id === b.id; }
function shallowEqualObj(a, b) {
if (!a || !b) return false;
return a.name===b.name && a.age===b.age && a.color===b.color && a.id === b.id;
}
function diffLists(orig, curr) {
// Returns: {origMap, currMap, changes: [{type: String, index(s), prevItem, currItem}]}
// Used for calling out changes in render.
// We'll track by unique id, and also spot property changes.
const idToOrigIdx = {}, idToCurrIdx = {};
orig.forEach((item,i)=>{ idToOrigIdx[item.id]=i; });
curr.forEach((item,i)=>{ idToCurrIdx[item.id]=i; });
const removedIds=[], addedIds=[], movedIds=[], changedIds=[];
orig.forEach((item, i)=>{
if (!(item.id in idToCurrIdx)) removedIds.push(item.id);
else if(idToCurrIdx[item.id]!==i) movedIds.push(item.id);
else if (!shallowEqualObj(item, curr[idToCurrIdx[item.id]])) changedIds.push(item.id);
});
curr.forEach((item,i)=>{
if (!(item.id in idToOrigIdx)) addedIds.push(item.id);
else if(idToOrigIdx[item.id]!==i && movedIds.indexOf(item.id)===-1) movedIds.push(item.id);
else if (!shallowEqualObj(item, orig[idToOrigIdx[item.id]]) && changedIds.indexOf(item.id)===-1) changedIds.push(item.id);
});
return {
removed: removedIds,
added: addedIds,
moved: movedIds,
changed: changedIds,
idToOrigIdx, idToCurrIdx
};
}
// ---------- RENDER ----------
function renderList(list, container, diff={}, mode='current') {
/* mode == 'current' => can interact, show add/controls, apply classes for [added|moved|changed]
== 'orig' => render list, show removed items crossed out
*/
container.innerHTML = "";
let showList;
let classCheck = ()=>'';
if (mode==='orig') {
// Need to display *also removed items* (that were in orig but gone).
// So our list is exactly orig, with any missing-in-curr highlighted as removed.
showList = [...list];
classCheck=(item)=>diff.removed && diff.removed.includes(item.id) ? 'removed' : '';
} else {
showList = [...list];
classCheck=(item)=>{
if(diff.added && diff.added.includes(item.id)) return 'added';
if(diff.removed && diff.removed.includes(item.id)) return 'removed';
if(diff.moved && diff.moved.includes(item.id)) return 'moved';
if(diff.changed && diff.changed.includes(item.id)) return 'changed';
return '';
}
}
showList.forEach((item, idx)=>{
const li = document.createElement('li');
li.className = 'list-item ' + classCheck(item);
// For "changed", highlight field
function field(fieldName, value) {
if (mode==='current' && diff.changed && diff.changed.includes(item.id)) {
// is the field changed?
const origIdx = diff.idToOrigIdx[item.id];
if (origIdx!=null && originalList[origIdx][fieldName]!==undefined && value !== originalList[origIdx][fieldName]) {
return `<span class="changed" title="Field changed">${value}</span>`;
}
}
return value;
}
li.innerHTML = `
<strong>${field("name", item.name)}</strong>,
Age: ${field("age", item.age)},
Favorite: <span style="color:${item.color.toLowerCase()}">${field("color", item.color)}</span>
`;
if (mode==='current') {
const btns = document.createElement('span');
btns.className = "item-buttons";
// move up/down
btns.innerHTML = `
<button title="Move up" data-move="up" ${idx===0 ? "disabled":""}>▲</button>
<button title="Move down" data-move="down" ${idx===showList.length-1?"disabled":""}>▼</button>
<button title="Edit" data-edit="true">✎</button>
<button title="Remove" data-remove="true">✕</button>
`;
btns.querySelector("[data-move='up']").onclick=()=>moveItem(idx, -1);
btns.querySelector("[data-move='down']").onclick=()=>moveItem(idx, 1);
btns.querySelector("[data-edit]").onclick=() => replaceWithEditRow(item, idx, li);
btns.querySelector("[data-remove]").onclick=()=>removeItem(idx);
li.appendChild(btns);
}
container.appendChild(li);
});
}
function replaceWithEditRow(item, idx, liElem) {
// Swap in an in-place editor for this row
const row = document.createElement("div");
row.className = "input-row";
row.innerHTML = `
<input type="text" value="${item.name.replace(/"/g, '"')}" style="width:7em" placeholder="Name">
<input type="number" value="${item.age}" min="0" style="width:3em" placeholder="Age">
<input type="text" value="${item.color.replace(/"/g, '"')}" style="width:6em" placeholder="Color">
<button>Save</button>
<button>Cancel</button>
`;
const [nameEl, ageEl, colorEl, saveBtn, cancelBtn] = row.children;
saveBtn.onclick=()=>{
const newName = nameEl.value.trim();
const newAge = +ageEl.value;
const newColor = colorEl.value.trim();
if (!newName || !newColor || !newAge || newAge<0) {
alert("Fill in all fields with valid values");
return;
}
const updated = { ...item, name: newName, age: newAge, color: newColor };
currentList[idx]=updated;
renderAll();
// Add highlight
liElem.classList.add("highlight");
setTimeout(()=>liElem.classList.remove("highlight"), 600);
};
cancelBtn.onclick=()=>renderAll();
liElem.innerHTML = "";
liElem.appendChild(row);
}
function renderAll() {
const currOl = document.getElementById('currentList');
const origOl = document.getElementById('originalList');
const diff = diffLists(originalList, currentList);
renderList(currentList, currOl, diff, 'current');
renderList(originalList, origOl, diff, 'orig');
}
renderAll();
// ---- BUTTONS ----
document.getElementById("addRandBtn").onclick = () => {
addItem(randomPerson());
};
document.getElementById("resetBtn").onclick = () => {
resetLists();
};
function addItem(item) {
currentList.push(item);
renderAll();
}
function removeItem(idx) {
if(confirm("Remove this person?")) {
currentList.splice(idx,1);
renderAll();
}
}
function moveItem(idx, dir) {
const to = idx + dir;
if (to<0 || to>=currentList.length) return;
// swap;
[currentList[idx], currentList[to]] = [currentList[to], currentList[idx]];
renderAll();
}
</script>
</body>
</html>
```Drag to resize
Here's a fully-functional, self-contained web tool to create, rearrange, expand, and reduce an ordered list of objects. The app provides:
- **Random initial generation**: 5 objects with random names and numeric values.
- **Two side-by-side views**:
- `Original List`: Always reflects the initial state (static).
- `Current List`: Reflects manipulations with visual callouts:
- **Added items**: Green background.
- **Modified values**: Orange background.
- **Deleted items**: Strikethrough in the original list.
### Supported Operations:
- **Create**: Add a new list item via the “Add Item” button.
- **Rearrange**: Use the ↑ and ↓ buttons to move an item up or down.
- **Expand**: Use the **+** button to increase an item’s value.
- **Reduce**: Use the **-** button to decrease an item’s value (minimum 0).
- **Delete**: Use the `X` button to remove an item.
---
The tool is completely self-contained in a single HTML file with embedded JavaScript and CSS for instant use.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>List Manipulation Tool</title>
<style>
body {
font-family: sans-serif;
background: #f9f9f9;
}
#app {
display: flex;
justify-content: space-around;
margin: 2em;
gap: 20px;
}
.list-section {
background-color: #fff;
border: 1px solid #ccc;
padding: 1em;
width: 45%;
}
.item {
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
}
.added {
background-color: #aaffaa;
}
.modified {
background-color: #ffd54f;
}
.deleted {
text-decoration: line-through;
color: gray;
}
button {
padding: 4px 6px;
font-size: 14px;
cursor: pointer;
}
h3 {
margin: 0;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="list-section">
<h3>Original List</h3>
<div id="original-list"></div>
</div>
<div class="list-section">
<h3>Current List</h3>
<button onclick="addItem()">Add Item</button>
<div id="current-list"></div>
</div>
</div>
<script>
let original = [];
let current = [];
function getRandomName() {
const adjectives = ['Quick', 'Sleepy', 'Lazy', 'Clever', 'Brave', 'Hungry'];
const nouns = ['Fox', 'Rabbit', 'Cat', 'Dog', 'Tiger', 'Lion'];
return `${adjectives[Math.floor(Math.random() * adjectives.length)]} ${nouns[Math.floor(Math.random() * nouns.length)]}`;
}
function generateOriginalList() {
for (let i = 1; i <= 5; i++) {
original.push({
id: i,
name: getRandomName(),
value: Math.floor(Math.random() * 100)
});
}
current = JSON.parse(JSON.stringify(original));
updateDisplay();
}
function updateDisplay() {
const originalList = document.getElementById('original-list');
const currentList = document.getElementById('current-list');
originalList.innerHTML = '';
currentList.innerHTML = '';
// Render Original
original.forEach(item => {
const div = document.createElement('div');
div.textContent = `${item.name} (Value: ${item.value})`;
if (!current.some(c => c.id === item.id)) div.classList.add('deleted');
originalList.appendChild(div);
});
// Render Current
current.forEach((item, index) => {
const container = document.createElement('div');
container.className = 'item';
// Add style class for visual feedback
const originalItem = original.find(o => o.id === item.id);
if (!originalItem) {
container.classList.add('added');
} else if (item.value !== originalItem.value) {
container.classList.add('modified');
}
// Text Content
const nameValueText = document.createElement('span');
nameValueText.textContent = `${item.name} (Value: ${item.value})`;
container.appendChild(nameValueText);
// Expand
const expandBtn = document.createElement('button');
expandBtn.textContent = '+';
expandBtn.onclick = () => {
item.value += 10;
updateDisplay();
};
container.appendChild(expandBtn);
// Reduce
const reduceBtn = document.createElement('button');
reduceBtn.textContent = '-';
reduceBtn.onclick = () => {
item.value = Math.max(0, item.value - 10);
updateDisplay();
};
container.appendChild(reduceBtn);
// Up
const upBtn = document.createElement('button');
upBtn.textContent = '↑';
upBtn.onclick = () => {
if (index > 0) {
[current[index], current[index - 1]] = [current[index - 1], current[index]];
updateDisplay();
}
};
container.appendChild(upBtn);
// Down
const downBtn = document.createElement('button');
downBtn.textContent = '↓';
downBtn.onclick = () => {
if (index < current.length - 1) {
[current[index], current[index + 1]] = [current[index + 1], current[index]];
updateDisplay();
}
};
container.appendChild(downBtn);
// Delete
const delBtn = document.createElement('button');
delBtn.textContent = 'X';
delBtn.onclick = () => {
current = current.filter(i => i.id !== item.id);
updateDisplay();
};
container.appendChild(delBtn);
currentList.appendChild(container);
});
}
function addItem() {
const maxId = current.reduce((id, item) => Math.max(id, item.id), 0);
const newId = maxId + 1;
const newItem = {
id: newId,
name: getRandomName(),
value: Math.floor(Math.random() * 100)
};
current.push(newItem);
updateDisplay();
}
// Initialize on load
generateOriginalList();
</script>
</body>
</html>
```
---
### How It Works
- **Original vs. Current**: The current list mirrors the original at startup, but changes dynamically as users interact.
- **Changes Highlighted**:
- **Green**: A new item added via “Add Item.”
- **Orange**: A value changed via `+` or `-`.
- **Strikethrough**: In the original list, denotes removal.
- **Rearranged items** are visually reordered but not highlighted as changed unless their properties (like `value`) are also altered.
This tool is ideal for interactive manipulation and visual tracking of object lists in educational, debugging, or prototyping environments.Drag to resize
Here's a complete HTML tool that lets you manage an ordered list of objects with all the requested functionality:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Manipulation Tool</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.container {
display: flex;
gap: 20px;
}
.list-panel {
flex: 1;
border: 1px solid #ccc;
padding: 15px;
border-radius: 5px;
}
h2 {
margin-top: 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 8px;
margin: 5px 0;
background-color: #f5f5f5;
border-radius: 3px;
display: flex;
justify-content: space-between;
}
.current li.changed {
background-color: #ffeb3b;
position: relative;
}
.current li.changed::after {
content: "changed";
position: absolute;
right: 5px;
top: 5px;
font-size: 0.6em;
color: #ff5722;
}
.current li.new {
background-color: #c8e6c9;
position: relative;
}
.current li.new::after {
content: "new";
position: absolute;
right: 5px;
top: 5px;
font-size: 0.6em;
color: #2e7d32;
}
.current li.removed {
text-decoration: line-through;
opacity: 0.6;
background-color: #ffcdd2;
position: relative;
}
.current li.removed::after {
content: "removed";
position: absolute;
right: 5px;
top: 5px;
font-size: 0.6em;
color: #c62828;
}
.controls {
margin-top: 20px;
}
button {
padding: 8px 12px;
margin-right: 5px;
cursor: pointer;
}
select, input {
padding: 8px;
margin-right: 5px;
}
</style>
</head>
<body>
<h1>List Manipulation Tool</h1>
<div class="container">
<div class="list-panel">
<h2>Original List</h2>
<ul id="original-list"></ul>
</div>
<div class="list-panel current">
<h2>Current List</h2>
<ul id="current-list"></ul>
</div>
</div>
<div class="controls">
<button id="add-btn">Add Item</button>
<input type="text" id="new-item" placeholder="New item text">
<button id="remove-btn">Remove Selected</button>
<select id="position-select">
<option value="start">Start</option>
<option value="end">End</option>
<option value="before">Before</option>
<option value="after">After</option>
</select>
<button id="move-up-btn">Move Up</button>
<button id="move-down-btn">Move Down</button>
<button id="reset-btn">Reset to Original</button>
</div>
<script>
// Sample objects for the initial list
const sampleObjects = [
"Book",
"Laptop",
"Coffee Mug",
"Notebook",
"Pen",
"Water Bottle",
"Headphones",
"Smartphone",
"Keys",
"Wallet"
];
// Shuffle array function
function shuffleArray(array) {
const newArray = [...array];
for (let i = newArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
}
return newArray;
}
// Get 5-10 random objects from the sample
const originalItems = shuffleArray(sampleObjects)
.slice(0, Math.floor(Math.random() * 6) + 5);
let currentItems = [...originalItems];
let selectedIndex = -1;
// Render the lists
function renderLists() {
const originalList = document.getElementById('original-list');
const currentList = document.getElementById('current-list');
// Clear lists
originalList.innerHTML = '';
currentList.innerHTML = '';
// Render original list
originalItems.forEach((item, index) => {
const li = document.createElement('li');
li.textContent = `${index + 1}. ${item}`;
originalList.appendChild(li);
});
// Render current list with change indicators
currentItems.forEach((item, index) => {
const li = document.createElement('li');
li.textContent = `${index + 1}. ${item}`;
// Mark changes
if (!originalItems.includes(item)) {
li.classList.add('new');
} else if (originalItems.indexOf(item) !== index) {
li.classList.add('changed');
}
// Set selection
if (index === selectedIndex) {
li.style.backgroundColor = '#bbdefb';
}
li.addEventListener('click', () => {
selectedIndex = index;
renderLists();
});
currentList.appendChild(li);
});
// Check for removed items (present in original but missing in current)
originalItems.forEach(item => {
if (!currentItems.includes(item)) {
const li = document.createElement('li');
li.textContent = item;
li.classList.add('removed');
currentList.appendChild(li);
}
});
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
renderLists();
// Add item
document.getElementById('add-btn').addEventListener('click', () => {
const newItemText = document.getElementById('new-item').value.trim();
if (newItemText) {
const position = document.getElementById('position-select').value;
if (position === 'start') {
currentItems.unshift(newItemText);
} else if (position === 'end') {
currentItems.push(newItemText);
} else if ((position === 'before' || position === 'after') && selectedIndex >= 0) {
const insertIndex = position === 'before' ? selectedIndex : selectedIndex + 1;
currentItems.splice(insertIndex, 0, newItemText);
} else {
currentItems.push(newItemText);
}
document.getElementById('new-item').value = '';
renderLists();
}
});
// Remove item
document.getElementById('remove-btn').addEventListener('click', () => {
if (selectedIndex >= 0) {
currentItems.splice(selectedIndex, 1);
selectedIndex = -1;
renderLists();
}
});
// Move up
document.getElementById('move-up-btn').addEventListener('click', () => {
if (selectedIndex > 0) {
const temp = currentItems[selectedIndex];
currentItems[selectedIndex] = currentItems[selectedIndex - 1];
currentItems[selectedIndex - 1] = temp;
selectedIndex--;
renderLists();
}
});
// Move down
document.getElementById('move-down-btn').addEventListener('click', () => {
if (selectedIndex >= 0 && selectedIndex < currentItems.length - 1) {
const temp = currentItems[selectedIndex];
currentItems[selectedIndex] = currentItems[selectedIndex + 1];
currentItems[selectedIndex + 1] = temp;
selectedIndex++;
renderLists();
}
});
// Reset
document.getElementById('reset-btn').addEventListener('click', () => {
currentItems = [...originalItems];
selectedIndex = -1;
renderLists();
});
});
</script>
</body>
</html>
```
This tool includes:
1. A random initial list of objects (5-10 items from a predefined set)
2. Two panels showing the original list and current list
3. Visual indicators for:
- New items (green highlight)
- Changed positions (yellow highlight)
- Removed items (red strikethrough)
4. Controls to:
- Add new items at different positions
- Remove selected items
- Move items up/down
- Reset to the original list
The tool maintains selection state and clearly shows all modifications made to the original list.Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ordered List Tool</title>
<style>
body { font-family: sans-serif; padding: 20px; }
.container { display: flex; gap: 50px; }
.list-container { width: 45%; }
.list-container h2 { text-align: center; }
ul { list-style-type: decimal; padding-left: 20px; }
li { margin: 5px 0; }
.removed { text-decoration: line-through; color: gray; }
.moved { background-color: #fffae6; }
.added { background-color: #e6ffe6; }
button { margin-left: 5px; }
.controls { margin-top: 20px; text-align: center; }
</style>
</head>
<body>
<h1>Ordered List Tool</h1>
<div class="container">
<div class="list-container">
<h2>Original List</h2>
<ul id="originalList"></ul>
</div>
<div class="list-container">
<h2>Current List</h2>
<ul id="currentList"></ul>
<div class="controls">
<button id="addItemBtn">Add Item</button>
<button id="resetBtn">Reset to Original</button>
</div>
</div>
</div>
<script>
(function() {
// Utility to generate random objects
const adjectives = ["Red","Blue","Green","Yellow","Small","Large","Shiny","Dull","Fast","Slow"];
const nouns = ["Apple","Car","Tree","House","Book","Phone","Bottle","Chair","Computer","Pen"];
function getRandomObject() {
const adj = adjectives[Math.floor(Math.random()*adjectives.length)];
const noun = nouns[Math.floor(Math.random()*nouns.length)];
return adj + " " + noun;
}
let originalItems = [], currentItems = [];
function init() {
// Generate initial state with 5 unique random objects
originalItems = [];
while (originalItems.length < 5) {
const obj = getRandomObject();
if (!originalItems.includes(obj)) originalItems.push(obj);
}
currentItems = originalItems.slice();
renderLists();
document.getElementById('addItemBtn').addEventListener('click', () => {
let newObj;
do {
newObj = getRandomObject();
} while (currentItems.includes(newObj) || originalItems.includes(newObj));
currentItems.push(newObj);
renderLists();
});
document.getElementById('resetBtn').addEventListener('click', () => {
currentItems = originalItems.slice();
renderLists();
});
}
function renderLists() {
renderOriginal();
renderCurrent();
}
function renderOriginal() {
const ol = document.getElementById('originalList');
ol.innerHTML = '';
originalItems.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
if (!currentItems.includes(item)) {
li.classList.add('removed');
}
ol.appendChild(li);
});
}
function renderCurrent() {
const cl = document.getElementById('currentList');
cl.innerHTML = '';
currentItems.forEach((item, idx) => {
const li = document.createElement('li');
li.textContent = item;
// Highlight new items
if (!originalItems.includes(item)) {
li.classList.add('added');
} else {
// Highlight moved items
const origIdx = originalItems.indexOf(item);
if (origIdx !== idx) li.classList.add('moved');
}
// Up button
const upBtn = document.createElement('button');
upBtn.textContent = '↑';
upBtn.disabled = idx === 0;
upBtn.addEventListener('click', () => {
[currentItems[idx-1], currentItems[idx]] = [currentItems[idx], currentItems[idx-1]];
renderLists();
});
// Down button
const downBtn = document.createElement('button');
downBtn.textContent = '↓';
downBtn.disabled = idx === currentItems.length - 1;
downBtn.addEventListener('click', () => {
[currentItems[idx], currentItems[idx+1]] = [currentItems[idx+1], currentItems[idx]];
renderLists();
});
// Remove button
const removeBtn = document.createElement('button');
removeBtn.textContent = 'Remove';
removeBtn.addEventListener('click', () => {
currentItems.splice(idx, 1);
renderLists();
});
li.appendChild(upBtn);
li.appendChild(downBtn);
li.appendChild(removeBtn);
cl.appendChild(li);
});
}
init();
})();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>List Editor</title>
<style>
.added {
color: green;
}
.removed {
text-decoration: line-through;
color: red;
}
</style>
</head>
<body>
<h1>List Editor</h1>
<div id="original-list"></div>
<div id="current-list"></div>
<div>
<button id="add-button">Add</button>
<button id="remove-button">Remove</button>
<button id="swap-button">Swap</button>
<button id="reset-button">Reset</button>
<input id="index-input" type="number" placeholder="Index">
</div>
<script>
// Generate random initial list
let originalList = Array(5).fill(0).map(() => Math.floor(Math.random() * 100));
let currentList = [...originalList];
// Display original list
const originalListElement = document.getElementById('original-list');
originalListElement.innerHTML = '<h2>Original List:</h2>' + originalList.join(', ');
// Display current list
const currentListElement = document.getElementById('current-list');
function displayCurrentList() {
currentListElement.innerHTML = '<h2>Current List:</h2>';
currentList.forEach((item, index) => {
const span = document.createElement('span');
if (originalList.includes(item) && currentList.indexOf(item) === originalList.indexOf(item)) {
span.textContent = item;
} else if (originalList.includes(item)) {
span.textContent = item;
span.classList.add('removed');
} else {
span.textContent = item;
span.classList.add('added');
}
currentListElement.appendChild(span);
currentListElement.appendChild(document.createTextNode(', '));
});
// Remove trailing comma and space
currentListElement.removeChild(currentListElement.lastChild);
}
displayCurrentList();
// Add event listeners to buttons
document.getElementById('add-button').addEventListener('click', () => {
const newIndex = parseInt(document.getElementById('index-input').value);
if (!isNaN(newIndex) && newIndex >= 0 && newIndex <= currentList.length) {
currentList.splice(newIndex, 0, Math.floor(Math.random() * 100));
} else {
currentList.push(Math.floor(Math.random() * 100));
}
displayCurrentList();
});
document.getElementById('remove-button').addEventListener('click', () => {
const removeIndex = parseInt(document.getElementById('index-input').value);
if (!isNaN(removeIndex) && removeIndex >= 0 && removeIndex < currentList.length) {
currentList.splice(removeIndex, 1);
}
displayCurrentList();
});
document.getElementById('swap-button').addEventListener('click', () => {
const index1 = parseInt(document.getElementById('index-input').value);
if (!isNaN(index1) && index1 >= 0 && index1 < currentList.length) {
const index2 = (index1 + 1) % currentList.length;
[currentList[index1], currentList[index2]] = [currentList[index2], currentList[index1]];
}
displayCurrentList();
});
document.getElementById('reset-button').addEventListener('click', () => {
currentList = [...originalList];
displayCurrentList();
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Manager Tool</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 20px;
}
.list-section {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.list-section h2 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
margin: 8px 0;
border: 2px solid #ddd;
border-radius: 6px;
background: #f9f9f9;
cursor: grab;
transition: all 0.3s ease;
}
.list-item:hover {
border-color: #007bff;
}
.list-item.dragging {
opacity: 0.5;
cursor: grabbing;
}
.list-item.added {
border-color: #28a745;
background-color: #d4edda;
}
.list-item.removed {
border-color: #dc3545;
background-color: #f8d7da;
text-decoration: line-through;
opacity: 0.7;
}
.list-item.moved {
border-color: #ffc107;
background-color: #fff3cd;
}
.item-content {
display: flex;
align-items: center;
gap: 10px;
}
.item-number {
background: #007bff;
color: white;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.item-text {
font-weight: 500;
}
.item-actions {
display: flex;
gap: 5px;
}
.btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s;
}
.btn-remove {
background: #dc3545;
color: white;
}
.btn-remove:hover {
background: #c82333;
}
.controls {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.controls h3 {
margin-top: 0;
color: #333;
}
.control-group {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
}
.control-group input[type="text"] {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
flex: 1;
min-width: 200px;
}
.btn-primary {
background: #007bff;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn-primary:hover {
background: #0056b3;
}
.btn-secondary {
background: #6c757d;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn-secondary:hover {
background: #545b62;
}
.legend {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.legend h4 {
margin-top: 0;
color: #333;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
margin: 5px 0;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid;
}
.legend-added {
background-color: #d4edda;
border-color: #28a745;
}
.legend-removed {
background-color: #f8d7da;
border-color: #dc3545;
}
.legend-moved {
background-color: #fff3cd;
border-color: #ffc107;
}
.drop-zone {
min-height: 100px;
border: 2px dashed #ddd;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
margin: 10px 0;
}
.drop-zone.drag-over {
border-color: #007bff;
background-color: #e7f3ff;
}
</style>
</head>
<body>
<h1>List Manager Tool</h1>
<div class="legend">
<h4>Change Legend</h4>
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
<div class="legend-item">
<div class="legend-color legend-added"></div>
<span>Added Items</span>
</div>
<div class="legend-item">
<div class="legend-color legend-removed"></div>
<span>Removed Items</span>
</div>
<div class="legend-item">
<div class="legend-color legend-moved"></div>
<span>Moved Items</span>
</div>
</div>
</div>
<div class="controls">
<h3>Controls</h3>
<div class="control-group">
<input type="text" id="newItemInput" placeholder="Enter new item name..." maxlength="50">
<button class="btn-primary" onclick="addItem()">Add Item</button>
<button class="btn-secondary" onclick="resetList()">Reset to Original</button>
<button class="btn-secondary" onclick="generateNewList()">Generate New List</button>
</div>
</div>
<div class="container">
<div class="list-section">
<h2>Original List</h2>
<div id="originalList"></div>
</div>
<div class="list-section">
<h2>Current List</h2>
<div id="currentList"></div>
<div class="drop-zone" id="dropZone">Drop items here to reorder</div>
</div>
</div>
<script>
let originalItems = [];
let currentItems = [];
let draggedItem = null;
let itemIdCounter = 0;
const animalNames = ['Lion', 'Tiger', 'Elephant', 'Giraffe', 'Zebra', 'Penguin', 'Dolphin', 'Eagle', 'Bear', 'Wolf', 'Fox', 'Rabbit', 'Deer', 'Monkey', 'Kangaroo'];
const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White', 'Gray', 'Cyan', 'Magenta', 'Lime', 'Indigo'];
const objects = ['Book', 'Car', 'House', 'Tree', 'Mountain', 'River', 'Bridge', 'Castle', 'Ship', 'Airplane', 'Bicycle', 'Guitar', 'Piano', 'Camera', 'Computer'];
function generateRandomItem() {
const categories = [animalNames, colors, objects];
const category = categories[Math.floor(Math.random() * categories.length)];
const item = category[Math.floor(Math.random() * category.length)];
return {
id: ++itemIdCounter,
name: item,
originalIndex: null,
status: 'original'
};
}
function initializeList() {
originalItems = [];
for (let i = 0; i < 8; i++) {
const item = generateRandomItem();
item.originalIndex = i;
originalItems.push(item);
}
currentItems = [...originalItems.map(item => ({...item}))];
updateDisplay();
}
function updateDisplay() {
updateOriginalList();
updateCurrentList();
}
function updateOriginalList() {
const container = document.getElementById('originalList');
container.innerHTML = '';
originalItems.forEach((item, index) => {
const div = document.createElement('div');
div.className = 'list-item';
div.innerHTML = `
<div class="item-content">
<div class="item-number">${index + 1}</div>
<div class="item-text">${item.name}</div>
</div>
`;
container.appendChild(div);
});
}
function updateCurrentList() {
const container = document.getElementById('currentList');
container.innerHTML = '';
currentItems.forEach((item, index) => {
const div = document.createElement('div');
div.className = `list-item ${getItemStatus(item)}`;
div.draggable = true;
div.dataset.itemId = item.id;
div.innerHTML = `
<div class="item-content">
<div class="item-number">${index + 1}</div>
<div class="item-text">${item.name}</div>
</div>
<div class="item-actions">
<button class="btn btn-remove" onclick="removeItem(${item.id})">Remove</button>
</div>
`;
div.addEventListener('dragstart', handleDragStart);
div.addEventListener('dragend', handleDragEnd);
div.addEventListener('dragover', handleDragOver);
div.addEventListener('drop', handleDrop);
container.appendChild(div);
});
}
function getItemStatus(item) {
const originalItem = originalItems.find(orig => orig.id === item.id);
if (!originalItem) {
return 'added';
}
const currentIndex = currentItems.findIndex(curr => curr.id === item.id);
const originalIndex = originalItems.findIndex(orig => orig.id === item.id);
if (currentIndex !== originalIndex) {
return 'moved';
}
return '';
}
function handleDragStart(e) {
draggedItem = this;
this.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.outerHTML);
}
function handleDragEnd(e) {
this.classList.remove('dragging');
draggedItem = null;
}
function handleDragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
const afterElement = getDragAfterElement(e.currentTarget.parentNode, e.clientY);
const dragging = document.querySelector('.dragging');
if (afterElement == null) {
e.currentTarget.parentNode.appendChild(dragging);
} else {
e.currentTarget.parentNode.insertBefore(dragging, afterElement);
}
}
function handleDrop(e) {
e.preventDefault();
const draggedId = parseInt(draggedItem.dataset.itemId);
const targetId = parseInt(this.dataset.itemId);
if (draggedId !== targetId) {
reorderItems(draggedId, targetId);
}
}
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.list-item:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
function reorderItems(draggedId, targetId) {
const draggedIndex = currentItems.findIndex(item => item.id === draggedId);
const targetIndex = currentItems.findIndex(item => item.id === targetId);
if (draggedIndex !== -1 && targetIndex !== -1) {
const [removed] = currentItems.splice(draggedIndex, 1);
currentItems.splice(targetIndex, 0, removed);
updateDisplay();
}
}
function addItem() {
const input = document.getElementById('newItemInput');
const name = input.value.trim();
if (name) {
const newItem = {
id: ++itemIdCounter,
name: name,
originalIndex: null,
status: 'added'
};
currentItems.push(newItem);
input.value = '';
updateDisplay();
}
}
function removeItem(itemId) {
const index = currentItems.findIndex(item => item.id === itemId);
if (index !== -1) {
currentItems.splice(index, 1);
updateDisplay();
}
}
function resetList() {
currentItems = [...originalItems.map(item => ({...item}))];
updateDisplay();
}
function generateNewList() {
itemIdCounter = 0;
initializeList();
}
// Setup drop zone
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('drag-over');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
});
// Allow Enter key to add items
document.getElementById('newItemInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addItem();
}
});
// Initialize the application
initializeList();
</script>
</body>
</html>
```
This tool provides a comprehensive list management interface with the following features:
1. **Visual Comparison**: Side-by-side display of original and current lists
2. **Color-coded Changes**:
- Green for added items
- Red for removed items (shown with strikethrough in original)
- Yellow for moved items
3. **Drag & Drop**: Reorder items by dragging them within the current list
4. **Add Items**: Text input to add new items to the list
5. **Remove Items**: Remove button for each item in the current list
6. **Reset Function**: Restore the list to its original state
7. **Generate New List**: Create a completely new random list
8. **Responsive Design**: Clean, modern interface that works on different screen sizes
The tool starts with 8 randomly generated items from categories like animals, colors, and objects. All changes are immediately reflected with visual indicators, making it easy to see what has been modified compared to the original list.Drag to resize