Skip to content

Commit

Permalink
Added Card Based Transfer List
Browse files Browse the repository at this point in the history
  • Loading branch information
@shraddhha
shraddhha committed Aug 3, 2024
1 parent 0007609 commit 7f592db
Show file tree
Hide file tree
Showing 36 changed files with 3,142 additions and 2 deletions.
Empty file added .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803203359.html
View file
Empty file.
37 changes: 37 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803203457.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container">
<h2>Available Menu Items</h2>
<div id="available-items" class="item-list card-list">
<!-- Menu items will be added here dynamically -->
</div>
</div>
<div class="buttons">
<button id="add" class="btn">Add &gt;&gt;</button>
<button id="remove" class="btn">&lt;&lt; Remove</button>
</div>
<div class="list-container">
<h2>Selected Menu Items</h2>
<div id="selected-items" class="item-list card-list">
<!-- Selected items will be added here dynamically -->
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
37 changes: 37 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803203707.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container">
<h2>Available Menu Items</h2>
<div id="available-items" class="item-list card-list">
<!-- Menu items will be added here dynamically -->
</div>
</div>
<div class="buttons">
<button id="add" class="btn">Add &gt;&gt;</button>
<button id="remove" class="btn">&lt;&lt; Remove</button>
</div>
<div class="list-container">
<h2>Selected Menu Items</h2>
<div id="selected-items" class="item-list card-list">
<!-- Selected items will be added here dynamically -->
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
37 changes: 37 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803203817.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container">
<h2>Available Menu Items</h2>
<div id="available-items" class="item-list card-list">
<!-- Menu items will be added here dynamically -->
</div>
</div>
<div class="buttons">
<button id="add" class="btn">Add &gt;&gt;</button>
<button id="remove" class="btn">&lt;&lt; Remove</button>
</div>
<div class="list-container">
<h2>Selected Menu Items</h2>
<div id="selected-items" class="item-list card-list">
<!-- Selected items will be added here dynamically -->
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
37 changes: 37 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803204041.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container">
<h2>Available Menu Items</h2>
<div id="available-items" class="item-list card-list">
<!-- Menu items will be added here dynamically -->
</div>
</div>
<div class="buttons">
<button id="add" class="btn">Add &gt;&gt;</button>
<button id="remove" class="btn">&lt;&lt; Remove</button>
</div>
<div class="list-container">
<h2>Selected Menu Items</h2>
<div id="selected-items" class="item-list card-list">
<!-- Selected items will be added here dynamically -->
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
37 changes: 37 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803204317.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container">
<h2>Available Menu Items</h2>
<div id="available-items" class="card-list">
<!-- Menu items will be added here dynamically -->
</div>
</div>
<div class="buttons">
<button id="add" class="btn">Add &gt;&gt;</button>
<button id="remove" class="btn">&lt;&lt; Remove</button>
</div>
<div class="list-container">
<h2>Selected Menu Items</h2>
<div id="selected-items" class="card-list">
<!-- Selected items will be added here dynamically -->
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
37 changes: 37 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803204634.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<div class="container">
<h1>Card Based Transfer List</h1>
<div class="lists">
<div class="list-container">
<h2>Available Projects</h2>
<div id="available-items" class="card-list">
<!-- Projects will be added here dynamically -->
</div>
</div>
<div class="buttons">
<button id="add" class="btn">Add &gt;&gt;</button>
<button id="remove" class="btn">&lt;&lt; Remove</button>
</div>
<div class="list-container">
<h2>Assigned Projects</h2>
<div id="selected-items" class="card-list">
<!-- Assigned projects will be added here dynamically -->
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
33 changes: 33 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803204949.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<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>
</div>
<script src="script.js"></script>
</body>

</html>
33 changes: 33 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/index_20240803205254.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Card Based Transfer List</title>
</head>

<body>
<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>
</div>
<script src="script.js"></script>
</body>

</html>
Empty file added .history/Components/Transfer-Lists/Card-Based-Transfer-List/script_20240803203441.js
View file
Empty file.
55 changes: 55 additions & 0 deletions .history/Components/Transfer-Lists/Card-Based-Transfer-List/script_20240803203457.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
document.addEventListener('DOMContentLoaded', () => {
const availableItems = document.getElementById('available-items');
const selectedItems = document.getElementById('selected-items');
const addButton = document.getElementById('add');
const removeButton = document.getElementById('remove');

const menuItems = [
'Grilled Vegetable Salad',
'Margherita Pizza',
'French Fries',
'Caesar Salad',
'Vegetable Stir Fry',
'Garlic Bread',
'Tomato Soup',
'Pasta Primavera',
'Vegetable Samosa',
'Caprese Salad'
];

function createCard(text) {
const card = document.createElement('div');
card.classList.add('card');
card.textContent = text;
card.addEventListener('click', () => {
card.classList.toggle('selected');
});
return card;
}

function populateList(container, items) {
container.innerHTML = '';
items.forEach(item => {
const card = createCard(item);
container.appendChild(card);
});
}

function transferSelectedItems(source, target) {
const selectedCards = Array.from(source.querySelectorAll('.selected'));
selectedCards.forEach(card => {
card.classList.remove('selected');
target.appendChild(card);
});
}

addButton.addEventListener('click', () => {
transferSelectedItems(availableItems, selectedItems);
});

removeButton.addEventListener('click', () => {
transferSelectedItems(selectedItems, availableItems);
});

populateList(availableItems, menuItems);
});
Loading

0 comments on commit 7f592db

Please sign in to comment.