Skip to content

Commit

Permalink
Enhanced the card based linked list Rakesh9100#1380*
Browse files Browse the repository at this point in the history
  • Loading branch information
Slavi committed Oct 6, 2024
1 parent f2d3532 commit b34022d
Show file tree
Hide file tree
Showing 3 changed files with 241 additions and 133 deletions.
39 changes: 19 additions & 20 deletions Components/Transfer-Lists/Card-Based-Transfer-List/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<title>Card Transfer List</title>
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<header>
<h1>Card-Based Transfer List</h1>
</header>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container" id="available-list-container">
<h2>Available Projects</h2>
<div id="available-items" class="card-list">
<!-- Projects will be added here dynamically -->
</div>
</div>
<div class="list-container" id="selected-list-container">
<h2>Assigned Projects</h2>
<div id="selected-items" class="card-list">
<!-- Assigned projects will be added here dynamically -->
</div>
</div>
<div class="list-container">
<input type="text" id="searchAvailable" placeholder="Search Available Projects">
<div id="availableProjects" class="list"></div>
<div>Available Projects: <span id="countAvailable">0</span></div>
</div>
<div class="buttons-container">
<button id="moveToAssigned">→</button>
<button id="moveToAvailable">←</button>
<button id="reset">Reset</button>
</div>
<div class="list-container">
<input type="text" id="searchAssigned" placeholder="Search Assigned Projects">
<div id="assignedProjects" class="list"></div>
<div>Assigned Projects: <span id="countAssigned">0</span></div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
</html>
178 changes: 115 additions & 63 deletions Components/Transfer-Lists/Card-Based-Transfer-List/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,122 @@
document.addEventListener('DOMContentLoaded', () => {
const availableItems = document.getElementById('available-items');
const selectedItems = document.getElementById('selected-items');
const availableListContainer = document.getElementById('available-list-container');
const selectedListContainer = document.getElementById('selected-list-container');

const projects = [
'Project Apollo',
'Project Zeus',
'Project Hera',
'Project Athena',
'Project Ares',
'Project Poseidon',
'Project Hades',
'Project Artemis',
'Project Demeter',
'Project Dionysus'
document.addEventListener("DOMContentLoaded", () => {
const availableProjects = document.getElementById("availableProjects");
const assignedProjects = document.getElementById("assignedProjects");
const countAvailable = document.getElementById("countAvailable");
const countAssigned = document.getElementById("countAssigned");
const searchAvailable = document.getElementById("searchAvailable");
const searchAssigned = document.getElementById("searchAssigned");
const resetBtn = document.getElementById("reset");

const initialAvailableProjects = [
'Alpha', 'Beta', 'Gamma', 'Delta',
'Epsilon', 'Zeta', 'Eta', 'Theta',
'Iota', 'Kappa', 'Lambda', 'Mu',
'Nu', 'Xi', 'Omicron', 'Pi'
];
const initialAssignedProjects = []; // Starts empty

function createCard(text) {
const card = document.createElement('div');
card.classList.add('card');
card.textContent = text;
card.draggable = true;
card.addEventListener('dragstart', () => {
card.classList.add('dragging');
const updateCounters = () => {
countAvailable.textContent = availableProjects.querySelectorAll(".card").length;
countAssigned.textContent = assignedProjects.querySelectorAll(".card").length;
};

const filterCards = (list, searchInput) => {
const filter = searchInput.value.toLowerCase();
const cards = list.querySelectorAll(".card");
cards.forEach(card => {
const text = card.textContent.toLowerCase();
card.style.display = text.includes(filter) ? "" : "none";
});
};

const resetLists = () => {
availableProjects.innerHTML = '';
assignedProjects.innerHTML = '';

initialAvailableProjects.forEach(text => {
const card = createCard(text);
availableProjects.appendChild(card);
});
card.addEventListener('dragend', () => {
card.classList.remove('dragging');

// Assigned projects list starts empty
initialAssignedProjects.forEach(text => {
const card = createCard(text);
assignedProjects.appendChild(card);
});

attachEventListeners();
updateCounters();
};

const createCard = (text) => {
const card = document.createElement("div");
card.className = "card";
card.draggable = true;
card.textContent = text;
card.addEventListener("dragstart", dragStart);
card.addEventListener("dragend", dragEnd);
card.addEventListener("click", () => {
card.classList.toggle("selected");
});
return card;
}
};

const dragStart = (event) => {
event.target.classList.add("dragging");
};

function populateList(container, items) {
container.innerHTML = '';
items.forEach(item => {
const card = createCard(item);
container.appendChild(card);
const dragEnd = (event) => {
event.target.classList.remove("dragging");
updateCounters();
};

const attachEventListeners = () => {
searchAvailable.addEventListener("input", () => {
filterCards(availableProjects, searchAvailable);
});

searchAssigned.addEventListener("input", () => {
filterCards(assignedProjects, searchAssigned);
});
}

function handleDrop(event) {
event.preventDefault();
const draggedCard = document.querySelector('.dragging');
const dropZone = event.currentTarget;
dropZone.classList.remove('drop-zone');
if (dropZone !== draggedCard.parentElement) {
dropZone.appendChild(draggedCard);
}
}

function handleDragOver(event) {
event.preventDefault();
event.currentTarget.classList.add('drop-zone');
}

function handleDragLeave(event) {
event.currentTarget.classList.remove('drop-zone');
}

availableListContainer.addEventListener('dragover', handleDragOver);
availableListContainer.addEventListener('dragleave', handleDragLeave);
availableListContainer.addEventListener('drop', handleDrop);

selectedListContainer.addEventListener('dragover', handleDragOver);
selectedListContainer.addEventListener('dragleave', handleDragLeave);
selectedListContainer.addEventListener('drop', handleDrop);

populateList(availableItems, projects);
});

const lists = document.querySelectorAll(".list");
lists.forEach(list => {
list.addEventListener("dragover", e => {
e.preventDefault();
});

list.addEventListener("drop", e => {
e.preventDefault();
const draggedCard = document.querySelector(".dragging");
if (draggedCard) {
list.appendChild(draggedCard);
updateCounters();
}
});
});
};

const transferSelectedCards = (fromList, toList) => {
const selectedCards = [...fromList.querySelectorAll(".card.selected")];
selectedCards.forEach(card => {
toList.appendChild(card);
card.classList.remove("selected");
});
updateCounters();
};

const moveToAssignedBtn = document.getElementById("moveToAssigned");
const moveToAvailableBtn = document.getElementById("moveToAvailable");

moveToAssignedBtn.addEventListener("click", () => {
transferSelectedCards(availableProjects, assignedProjects);
});

moveToAvailableBtn.addEventListener("click", () => {
transferSelectedCards(assignedProjects, availableProjects);
});

resetBtn.addEventListener("click", resetLists);

resetLists();
});
Loading

0 comments on commit b34022d

Please sign in to comment.