Как сверстать списки в квадратах?

Добрый день. Дана таблица. В таблице мне нужно сделать два квадрата, в каждом список, и две стрелки между ними. Должно быть так: в каждом квадрате список, выбираю значения из списка в одном квадрате и с помощью нажатия на стрелку выбранный мною список переносится в другой квадрат. Это должно работать и в обратную сторону

Дополнительно:

ну для начала все это нужно просто сверстать. С этим есть проблемы?

<div class="container"> 			<div class="square"> 				<h2>1</h2> 				<ul id="list1"> 					<li>Элемент 1</li> 					<li>Элемент 2</li> 					<li>Элемент 3</li> 				</ul> 			</div> 			<div class="arrows"> 				<button onclick="moveItem('list1', 'list2')">→</button> 				<button onclick="moveItem('list2', 'list1')">←</button> 			</div> 			<div class="square"> 				<h2>2</h2> 				<ul id="list2"> 					<li>Элемент 4</li> 					<li>Элемент 5</li> 					<li>Элемент 6</li> 				</ul> 			</div> 		</div>

<style> 			.square { 				width: 200px; 				height: 200px; 				border: 1px solid #000; 				display: inline-block; 				vertical-align: top; 				margin: 10px; 				padding: 10px; 			} 			.arrows { 				text-align: center; 				display: inline-block; 				vertical-align: top; 				margin: 10px; 				font-size: 24px; 			} 			ul { 				padding: 0; 			} 			li { 				list-style: none; 				cursor: pointer; 			} 		</style>

Ответы:

body {
font-family: Arial, sans-serif;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

.box {
border: 1px solid #ccc;
padding: 10px;
width: 40%;
text-align: center;
}

h2 {
margin: 0;
}

.list {
list-style-type: none;
padding: 0;
}

.list li {
margin: 5px 0;
cursor: pointer;
transition: background-color 0.3s, font-weight 0.3s;
}

.list li.selected {
background-color: #f0f0f0;
font-weight: bold;
}

.arrows {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20%;
}

button {
font-size: 24px;
margin: 10px 0;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

• document.addEventListener('DOMContentLoaded', function() { const list1 = document.getElementById('list1'); const list2 = document.getElementById('list2'); const toRightButton = document.getElementById('toRight'); const toLeftButton = document.getElementById('toLeft'); // Функция для перемещения элементов из одного списка в другой function moveItem(sourceList, targetList) { const selectedItems = sourceList.querySelectorAll('.selected'); selectedItems.forEach(function(item) { item.classList.remove('selected'); targetList.appendChild(item); }); } // Обработчики событий для кнопок перемещения вправо и влево toRightButton.addEventListener('click', function() { moveItem(list1, list2); }); toLeftButton.addEventListener('click', function() { moveItem(list2, list1); }); // Обработчики событий для выбора элементов в списке list1.addEventListener('click', function(e) { const selectedItem = e.target; if (selectedItem.tagName === 'LI') { selectedItem.classList.toggle('selected'); } }); list2.addEventListener('click', function(e) { const selectedItem = e.target; if (selectedItem.tagName === 'LI') { selectedItem.classList.toggle('selected'); } }); });

  document.addEventListener('DOMContentLoaded', function() { const list1 = document.getElementById('list1'); const list2 = document.getElementById('list2'); const toRightButton = document.getElementById('toRight'); const toLeftButton = document.getElementById('toLeft'); // Функция для перемещения элементов из одного списка в другой function moveItem(sourceList, targetList) { const selectedItems = sourceList.querySelectorAll('.selected'); selectedItems.forEach(function(item) { item.classList.remove('selected'); targetList.appendChild(item); }); } // Обработчики событий для кнопок перемещения вправо и влево toRightButton.addEventListener('click', function() { moveItem(list1, list2); }); toLeftButton.addEventListener('click', function() { moveItem(list2, list1); }); // Обработчики событий для выбора элементов в списке list1.addEventListener('click', function(e) { const selectedItem = e.target; if (selectedItem.tagName === 'LI') { selectedItem.classList.toggle('selected'); } }); list2.addEventListener('click', function(e) { const selectedItem = e.target; if (selectedItem.tagName === 'LI') { selectedItem.classList.toggle('selected'); } }); });

• <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Перемещение элементов</title> </head> <body> <div class="container"> <div class="box" id="box1"> <h2>Квадрат 1</h2> <ul id="list1" class="list"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> <li>Элемент 4</li> </ul> </div> <div class="arrows"> <button id="toRight">➡</button> <button id="toLeft">⬅</button> </div> <div class="box" id="box2"> <h2>Квадрат 2</h2> <ul id="list2" class="list"> <li>Элемент 4</li> <li>Элемент 5</li> <li>Элемент 6</li> <li>Элемент 7</li> </ul> </div> </div> <script src="script.js"></script> </body> </html>

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Перемещение элементов</title> </head> <body> <div class="container"> <div class="box" id="box1"> <h2>Квадрат 1</h2> <ul id="list1" class="list"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> <li>Элемент 4</li> </ul> </div> <div class="arrows"> <button id="toRight">➡</button> <button id="toLeft">⬅</button> </div> <div class="box" id="box2"> <h2>Квадрат 2</h2> <ul id="list2" class="list"> <li>Элемент 4</li> <li>Элемент 5</li> <li>Элемент 6</li> <li>Элемент 7</li> </ul> </div> </div> <script src="script.js"></script> </body> </html>