nawada/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Switcher</title>
    <style>
        #teams {
            display: flex;
            justify-content: space-evenly;
        }

        .team {
            border: 1px solid #333;
            padding: 15px;
        }
    </style>
</head>
<body>
    <main>
        <div id="teams">
            <div id="players">
                <button id="lot">チーム分けする</button>
            </div>

            <div class="team">
                <h1>Team A</h1>
                <ul id="team-a"></ul>
            </div>
            <div class="team">
                <h1>Team B</h1>
                <ul id="team-b"></ul>
            </div>
        </div>
    </main>

    <script>
        const addTargetElement = document.querySelector('#players');
        const teamAElement = document.querySelector('#team-a');
        const teamBElement = document.querySelector('#team-b');
        const inputs = [];

        /**
         * 選手名を入力するための input を追加する
         */
        const addInputElement = () => {
            const p = document.createElement('p');
            const newInput = document.createElement('input');
            inputs.push(newInput);
            const inputNum = inputs.length;
            newInput.classList.add(['player', `player-${inputNum}`]);
            newInput.addEventListener('keyup', inputEvent);
            newInput.tabIndex = inputNum;
            p.appendChild(newInput);
            addTargetElement.append(p);
        };

        /**
         * input のイベント. 空の input があれば追加しない
         */
        const inputEvent = (ev) => {
            const hasEmpty = inputs.some((input) => input.value.length === 0);
            if (hasEmpty) {
                return;
            }
            addInputElement();
        };

        const fisherYatesShuffle = (arr) => {
            for (let i = arr.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1)); //random index
                [arr[i], arr[j]] = [arr[j], arr[i]]; // swap
            }
        };

        /**
         * 乱数が偶数だったらチームA, 奇数だったらチームB
         */
        const lottery = () => {
            const halfNum = Math.floor(inputs.length / 2);
            const teamA = [];
            const teamB = [];
            fisherYatesShuffle(inputs);

            inputs.forEach((input) => {
                if (input.value === "") {
                    return;
                }

                // どちらかのチームが最大人数になってたらあとは全員別チーム
                if (teamA.length === halfNum) {
                    teamB.push(input);
                    return;
                } else if(teamB.length === halfNum) {
                    teamA.push(input);
                    return;
                }

                const random = Math.floor(Math.random() * (new Date().getTime()));
                if (random % 2 === 0) {
                    teamA.push(input);
                } else {
                    teamB.push(input);
                }
            });

            // クリア
            teamAElement.innerHTML = "";
            teamBElement.innerHTML = "";

            const addItem = (target, player) => {
                const li = document.createElement('li');
                li.innerText = player;
                target.append(li);
            };

            // 各チームを tabIndex に従ってソート
            teamA.sort((a, b) => a.tabIndex - b.tabIndex);
            teamB.sort((a, b) => a.tabIndex - b.tabIndex);
            console.log({ teamA, teamB });

            teamA.forEach((input) => addItem(teamAElement, input.value));
            teamB.forEach((input) => addItem(teamBElement, input.value));
        };
        // ボタンにイベントを設定
        document.querySelector('#lot').addEventListener('click', lottery);

        // 最初に1つ入力できるようにする
        addInputElement();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Team Switcher</title>
	<style>
	#teams {
	display: flex;
	justify-content: space-evenly;
	}

	.team {
	border: 1px solid #333;
	padding: 15px;
	}
	</style>
	</head>
	<body>
	<main>
	<div id="teams">
	<div id="players">
	<button id="lot">チーム分けする</button>
	</div>

	<div class="team">
	<h1>Team A</h1>
	<ul id="team-a"></ul>
	</div>
	<div class="team">
	<h1>Team B</h1>
	<ul id="team-b"></ul>
	</div>
	</div>
	</main>

	<script>
	const addTargetElement = document.querySelector('#players');
	const teamAElement = document.querySelector('#team-a');
	const teamBElement = document.querySelector('#team-b');
	const inputs = [];

	/**
	* 選手名を入力するための input を追加する
	*/
	const addInputElement = () => {
	const p = document.createElement('p');
	const newInput = document.createElement('input');
	inputs.push(newInput);
	const inputNum = inputs.length;
	newInput.classList.add(['player', `player-${inputNum}`]);
	newInput.addEventListener('keyup', inputEvent);
	newInput.tabIndex = inputNum;
	p.appendChild(newInput);
	addTargetElement.append(p);
	};

	/**
	* input のイベント. 空の input があれば追加しない
	*/
	const inputEvent = (ev) => {
	const hasEmpty = inputs.some((input) => input.value.length === 0);
	if (hasEmpty) {
	return;
	}
	addInputElement();
	};

	const fisherYatesShuffle = (arr) => {
	for (let i = arr.length - 1; i > 0; i--) {
	var j = Math.floor(Math.random() * (i + 1)); //random index
	[arr[i], arr[j]] = [arr[j], arr[i]]; // swap
	}
	};

	/**
	* 乱数が偶数だったらチームA, 奇数だったらチームB
	*/
	const lottery = () => {
	const halfNum = Math.floor(inputs.length / 2);
	const teamA = [];
	const teamB = [];
	fisherYatesShuffle(inputs);

	inputs.forEach((input) => {
	if (input.value === "") {
	return;
	}

	// どちらかのチームが最大人数になってたらあとは全員別チーム
	if (teamA.length === halfNum) {
	teamB.push(input);
	return;
	} else if(teamB.length === halfNum) {
	teamA.push(input);
	return;
	}

	const random = Math.floor(Math.random() * (new Date().getTime()));
	if (random % 2 === 0) {
	teamA.push(input);
	} else {
	teamB.push(input);
	}
	});

	// クリア
	teamAElement.innerHTML = "";
	teamBElement.innerHTML = "";

	const addItem = (target, player) => {
	const li = document.createElement('li');
	li.innerText = player;
	target.append(li);
	};

	// 各チームを tabIndex に従ってソート
	teamA.sort((a, b) => a.tabIndex - b.tabIndex);
	teamB.sort((a, b) => a.tabIndex - b.tabIndex);
	console.log({ teamA, teamB });

	teamA.forEach((input) => addItem(teamAElement, input.value));
	teamB.forEach((input) => addItem(teamBElement, input.value));
	};
	// ボタンにイベントを設定
	document.querySelector('#lot').addEventListener('click', lottery);

	// 最初に1つ入力できるようにする
	addInputElement();
	</script>
	</body>
	</html>