Skip to content

Commit 33b6e4b

Browse files
shraddhhashraddhha
authored
Added Card Based Transfer List (#1326)
1 parent e12dba6 commit 33b6e4b

File tree

5 files changed

+201
-2
lines changed

5 files changed

+201
-2
lines changed

‎Components/Transfer-Lists/Card-Based-Transfer-List/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Card Based Transfer List</title>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<h1>Card Based Transfer List</h1>
15+
<div class="lists">
16+
<div class="list-container" id="available-list-container">
17+
<h2>Available Projects</h2>
18+
<div id="available-items" class="card-list">
19+
<!-- Projects will be added here dynamically -->
20+
</div>
21+
</div>
22+
<div class="list-container" id="selected-list-container">
23+
<h2>Assigned Projects</h2>
24+
<div id="selected-items" class="card-list">
25+
<!-- Assigned projects will be added here dynamically -->
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
33+
</html>

‎Components/Transfer-Lists/Card-Based-Transfer-List/script.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const availableItems = document.getElementById('available-items');
3+
const selectedItems = document.getElementById('selected-items');
4+
const availableListContainer = document.getElementById('available-list-container');
5+
const selectedListContainer = document.getElementById('selected-list-container');
6+
7+
const projects = [
8+
'Project Apollo',
9+
'Project Zeus',
10+
'Project Hera',
11+
'Project Athena',
12+
'Project Ares',
13+
'Project Poseidon',
14+
'Project Hades',
15+
'Project Artemis',
16+
'Project Demeter',
17+
'Project Dionysus'
18+
];
19+
20+
function createCard(text) {
21+
const card = document.createElement('div');
22+
card.classList.add('card');
23+
card.textContent = text;
24+
card.draggable = true;
25+
card.addEventListener('dragstart', () => {
26+
card.classList.add('dragging');
27+
});
28+
card.addEventListener('dragend', () => {
29+
card.classList.remove('dragging');
30+
});
31+
return card;
32+
}
33+
34+
function populateList(container, items) {
35+
container.innerHTML = '';
36+
items.forEach(item => {
37+
const card = createCard(item);
38+
container.appendChild(card);
39+
});
40+
}
41+
42+
function handleDrop(event) {
43+
event.preventDefault();
44+
const draggedCard = document.querySelector('.dragging');
45+
const dropZone = event.currentTarget;
46+
dropZone.classList.remove('drop-zone');
47+
if (dropZone !== draggedCard.parentElement) {
48+
dropZone.appendChild(draggedCard);
49+
}
50+
}
51+
52+
function handleDragOver(event) {
53+
event.preventDefault();
54+
event.currentTarget.classList.add('drop-zone');
55+
}
56+
57+
function handleDragLeave(event) {
58+
event.currentTarget.classList.remove('drop-zone');
59+
}
60+
61+
availableListContainer.addEventListener('dragover', handleDragOver);
62+
availableListContainer.addEventListener('dragleave', handleDragLeave);
63+
availableListContainer.addEventListener('drop', handleDrop);
64+
65+
selectedListContainer.addEventListener('dragover', handleDragOver);
66+
selectedListContainer.addEventListener('dragleave', handleDragLeave);
67+
selectedListContainer.addEventListener('drop', handleDrop);
68+
69+
populateList(availableItems, projects);
70+
});

‎Components/Transfer-Lists/Card-Based-Transfer-List/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body {
2+
font-family: 'Open Sans', sans-serif;
3+
background: linear-gradient(to right, #ece9e6, #ffffff);
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
margin: 0;
9+
}
10+
11+
.container {
12+
background: #f0f0f0;
13+
border-radius: 15px;
14+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
15+
padding: 40px;
16+
width: 90%;
17+
max-width: 1200px;
18+
text-align: center;
19+
}
20+
21+
h1 {
22+
font-family: 'Lobster', cursive;
23+
color: #333;
24+
margin-bottom: 40px;
25+
font-size: 3em;
26+
}
27+
28+
.lists {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
}
33+
34+
.list-container {
35+
flex: 1;
36+
margin: 0 20px;
37+
background: #fff;
38+
border-radius: 10px;
39+
padding: 20px;
40+
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
41+
}
42+
43+
.card-list {
44+
display: flex;
45+
flex-wrap: wrap;
46+
gap: 20px;
47+
justify-content: center;
48+
padding: 20px;
49+
border: 1px solid #ddd;
50+
border-radius: 8px;
51+
max-height: 400px;
52+
overflow-y: auto;
53+
background: #fff;
54+
}
55+
56+
.card {
57+
background: #ffffff;
58+
border: 1px solid #ddd;
59+
border-radius: 12px;
60+
padding: 20px;
61+
width: 150px;
62+
text-align: center;
63+
cursor: pointer;
64+
transition: background 0.3s, transform 0.3s;
65+
font-size: 1.2em;
66+
font-weight: 600;
67+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
68+
user-select: none;
69+
/* Prevent text selection during drag */
70+
}
71+
72+
.card:hover {
73+
background: #e0f7fa;
74+
}
75+
76+
.card.dragging {
77+
opacity: 0.5;
78+
}
79+
80+
.card-list.drop-zone {
81+
background: #e0f7fa;
82+
}

‎assets/html_files/transfer-lists.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,21 @@ <h1>Neumorphism Transfer List</h1>
128128
</a>
129129
</div>
130130
</div>
131+
<div class="box">
132+
<h1>Card Based Transfer List</h1>
133+
<div class="preview">
134+
<a href="../../Components/Transfer-Lists/Card-Based-Transfer-List/index.html" title="Live Preview" target="_blank">
135+
<img src="../images/link.png">
136+
</a>
137+
</div>
138+
<div class="source">
139+
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Transfer-Lists/Card-Based-Transfer-List" title="Source Code" target="_blank">
140+
<img src="../images/github.png">
141+
</a>
142+
</div>
143+
</div>
131144
</div>
145+
132146
</section>
133147

134148
<!-- Scroll To Top Button -->
@@ -144,4 +158,4 @@ <h1>Neumorphism Transfer List</h1>
144158
<script src="../js_files/progressBar.js"></script>
145159
</body>
146160

147-
</html>
161+
</html>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -380,4 +380,4 @@ <h1 class="heading">Keep In Touch</h1>
380380
<script src="./assets/js_files/progressBar.js"></script>
381381
</body>
382382

383-
</html>
383+
</html>

0 commit comments

Comments
 (0)