Python-37/index.html

## index.html
<html lang="en">
  <!-- version 0.2 -->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Who is the lucky guy</title>
  </head>
  <style>
    html * {
      font-size: 35px;
    }

    .name_display_box {
      width: 30%;
      height: 100%;
      margin-right: 10px;
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      display: inline-table;
    }
    .name_display_box:last-child {
      margin-right: 0;
    }

    button.green {
      background: linear-gradient(to bottom, #00cc00, #009900);
      border-radius: 5px;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    button.blue {
      background: linear-gradient(to bottom, #3399ff, #0066cc);
      border-radius: 5px;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    button.red {
      background: linear-gradient(to bottom, #ff6666, #cc0000);
      border-radius: 5px;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    button.grey {
      background-color: #ccc;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    textarea {
      width: 100%;
      border: none;
      border-radius: 5px;
      box-shadow: 0px 0px 5px #ccc;
      padding: 10px;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 5px;
    }

    ::-webkit-scrollbar-track {
      background-color: #f2f2f2;
      border-radius: 5px;
      box-shadow: inset 0px 0px 5px white;
    }
  </style>
  <script src="./jquery-3.7.1.min.js"></script>
  <script>
    var _name_list = [];

    function getRandomElementsFromArray(array, count) {
      var result = [];
      if (array.length <= count) {
        while (array.length > 0) {
          result.push(array.shift());
        }
      } else {
        for (var i = 0; i < count; i++) {
          var randomIndex = Math.floor(Math.random() * array.length);
          result.push(array[randomIndex]);
          array.splice(randomIndex, 1);
        }
      }
      return result;
    }

    function readFile(event) {
      var file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function (e) {
        var content = e.target.result;
        $("#name_input_zone textarea").val(content);
      };
      reader.readAsText(file);
      $("#input_name_by_hand").prop("disabled", true);
      $("#input_name_by_hand").removeClass("red");
      $("#input_name_by_hand").addClass("grey");
    }

    $(function () {
      function updateNameList() {
        // filte the empty line
        var _content = $("#name_input_zone textarea").val();
        _content = _content.replace(/^(\r\n|\n|\r|\t| )+/gm, "");
        $("#name_input_zone textarea").val(_content);
        _name_list = $.trim(_content)
          .split(/\r\n|\r|\n/)
          .filter((line) => line.trim() !== "");
      }

      $("#name_input_zone textarea").bind(
        "input propertychange",
        updateNameList()
      );
      // $("#name_input_zone textarea").change(updateNameList());
      $("#name_input_zone button.draw").click(function () {
        updateNameList();
        var _repeatable =
          $('#name_input_zone [name="repeatable"]').length === 1;

        var _result = $("#result_zone").empty();
        var _number = parseInt($("#number_input_zone").val());
        if (isNaN(_number) | (_number < 1)) {
          _result.html("正しい数値を入力するのは必要です");
          return;
        }
        if (_name_list.length < 1) {
          _result.html("名前を入力するのは必要です");
          return;
        }

        var chosen_guys = getRandomElementsFromArray(_name_list, _number);

        _result.append("<div>抽選結果(" + chosen_guys.length + "人)：</div>");

        for (var i = 0; i < chosen_guys.length; i++) {
          var _chosen_guy_div = `<div>${chosen_guys[i]}</div>`;
          _result.append(_chosen_guy_div);
          $("#choosed_persons").val(
            $("#choosed_persons").val() + `${chosen_guys[i]}\n`
          );
        }
        $("#name_input_zone textarea").val(_name_list.join("\n"));
      });

      $("#name_input_zone button.default").click(function () {
        updateNameList();
      });
      $("#name_reset_button").click(function () {
        $("#input_name_by_hand").prop("disabled", false);
        $("#input_name_by_hand").removeClass("grey");
        $("#input_name_by_hand").addClass("red");
        var choosed_persons_list = $.trim($("#choosed_persons").val())
          .split(/\r\n|\r|\n/)
          .filter((line) => line.trim() !== "");
        if (choosed_persons_list.length === 0) {
          return;
        } else {
          var leaved_content = $("#name_input_zone textarea").val();
          if (leaved_content.length > 0) {
            $("#name_input_zone textarea").val(
              leaved_content + "\n" + $("#choosed_persons").val()
            );
          } else {
            $("#name_input_zone textarea").val($("#choosed_persons").val());
          }
          $("#choosed_persons").val("");
        }
      });
    });
  </script>
  <body>
    <!-- not choosed person -->
    <div id="name_input_zone" class="name_display_box">
      <label
        >抽選人数:
        <input id="number_input_zone" type="number" name="number" value="1"
      /></label>
      <div>
        <textarea cols="30" rows="10"></textarea>
      </div>
      <div class="div-button">
        <button class="button green" onclick="$('#txt_file_input').click()">
          txtファイルを選択します
        </button>
        <input
          type="file"
          id="txt_file_input"
          style="display: none"
          onchange="readFile(event)"
        />
        <button type="button" class="default red" id="input_name_by_hand">
          名簿をインポート
        </button>
        <button type="button" class="draw blue">スタート</button>
      </div>
    </div>
    <!-- choosed person -->
    <div class="name_display_box">
      安全地帯<br /><textarea
        id="choosed_persons"
        cols="30"
        rows="10"
      ></textarea>
      <div class="div-button">
        <button type="button" class="default red" id="name_reset_button">
          リセット
        </button>
      </div>
    </div>
    <!-- current choosed person -->
    <div id="result_zone" class="name_display_box">
      選択した名前がここに表示されます
    </div>
  </body>
</html>
	<html lang="en">
	<!-- version 0.2 -->
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Who is the lucky guy</title>
	</head>
	<style>
	html * {
	font-size: 35px;
	}

	.name_display_box {
	width: 30%;
	height: 100%;
	margin-right: 10px;
	background-color: #f2f2f2;
	border: 1px solid #ccc;
	display: inline-table;
	}
	.name_display_box:last-child {
	margin-right: 0;
	}

	button.green {
	background: linear-gradient(to bottom, #00cc00, #009900);
	border-radius: 5px;
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	}

	button.blue {
	background: linear-gradient(to bottom, #3399ff, #0066cc);
	border-radius: 5px;
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	}

	button.red {
	background: linear-gradient(to bottom, #ff6666, #cc0000);
	border-radius: 5px;
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	}

	button.grey {
	background-color: #ccc;
	color: white;
	border: none;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	}

	textarea {
	width: 100%;
	border: none;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #ccc;
	padding: 10px;
	}

	::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	}

	::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 5px;
	}

	::-webkit-scrollbar-track {
	background-color: #f2f2f2;
	border-radius: 5px;
	box-shadow: inset 0px 0px 5px white;
	}
	</style>
	<script src="./jquery-3.7.1.min.js"></script>
	<script>
	var _name_list = [];

	function getRandomElementsFromArray(array, count) {
	var result = [];
	if (array.length <= count) {
	while (array.length > 0) {
	result.push(array.shift());
	}
	} else {
	for (var i = 0; i < count; i++) {
	var randomIndex = Math.floor(Math.random() * array.length);
	result.push(array[randomIndex]);
	array.splice(randomIndex, 1);
	}
	}
	return result;
	}

	function readFile(event) {
	var file = event.target.files[0];
	var reader = new FileReader();
	reader.onload = function (e) {
	var content = e.target.result;
	$("#name_input_zone textarea").val(content);
	};
	reader.readAsText(file);
	$("#input_name_by_hand").prop("disabled", true);
	$("#input_name_by_hand").removeClass("red");
	$("#input_name_by_hand").addClass("grey");
	}

	$(function () {
	function updateNameList() {
	// filte the empty line
	var _content = $("#name_input_zone textarea").val();
	_content = _content.replace(/^(\r\n\|\n\|\r\|\t\| )+/gm, "");
	$("#name_input_zone textarea").val(_content);
	_name_list = $.trim(_content)
	.split(/\r\n\|\r\|\n/)
	.filter((line) => line.trim() !== "");
	}

	$("#name_input_zone textarea").bind(
	"input propertychange",
	updateNameList()
	);
	// $("#name_input_zone textarea").change(updateNameList());
	$("#name_input_zone button.draw").click(function () {
	updateNameList();
	var _repeatable =
	$('#name_input_zone [name="repeatable"]').length === 1;

	var _result = $("#result_zone").empty();
	var _number = parseInt($("#number_input_zone").val());
	if (isNaN(_number) \| (_number < 1)) {
	_result.html("正しい数値を入力するのは必要です");
	return;
	}
	if (_name_list.length < 1) {
	_result.html("名前を入力するのは必要です");
	return;
	}

	var chosen_guys = getRandomElementsFromArray(_name_list, _number);

	_result.append("<div>抽選結果(" + chosen_guys.length + "人)：</div>");

	for (var i = 0; i < chosen_guys.length; i++) {
	var _chosen_guy_div = `<div>${chosen_guys[i]}</div>`;
	_result.append(_chosen_guy_div);
	$("#choosed_persons").val(
	$("#choosed_persons").val() + `${chosen_guys[i]}\n`
	);
	}
	$("#name_input_zone textarea").val(_name_list.join("\n"));
	});

	$("#name_input_zone button.default").click(function () {
	updateNameList();
	});
	$("#name_reset_button").click(function () {
	$("#input_name_by_hand").prop("disabled", false);
	$("#input_name_by_hand").removeClass("grey");
	$("#input_name_by_hand").addClass("red");
	var choosed_persons_list = $.trim($("#choosed_persons").val())
	.split(/\r\n\|\r\|\n/)
	.filter((line) => line.trim() !== "");
	if (choosed_persons_list.length === 0) {
	return;
	} else {
	var leaved_content = $("#name_input_zone textarea").val();
	if (leaved_content.length > 0) {
	$("#name_input_zone textarea").val(
	leaved_content + "\n" + $("#choosed_persons").val()
	);
	} else {
	$("#name_input_zone textarea").val($("#choosed_persons").val());
	}
	$("#choosed_persons").val("");
	}
	});
	});
	</script>
	<body>
	<!-- not choosed person -->
	<div id="name_input_zone" class="name_display_box">
	<label
	>抽選人数:
	<input id="number_input_zone" type="number" name="number" value="1"
	/></label>
	<div>
	<textarea cols="30" rows="10"></textarea>
	</div>
	<div class="div-button">
	<button class="button green" onclick="$('#txt_file_input').click()">
	txtファイルを選択します
	</button>
	<input
	type="file"
	id="txt_file_input"
	style="display: none"
	onchange="readFile(event)"
	/>
	<button type="button" class="default red" id="input_name_by_hand">
	名簿をインポート
	</button>
	<button type="button" class="draw blue">スタート</button>
	</div>
	</div>
	<!-- choosed person -->
	<div class="name_display_box">
	安全地帯<br /><textarea
	id="choosed_persons"
	cols="30"
	rows="10"
	></textarea>
	<div class="div-button">
	<button type="button" class="default red" id="name_reset_button">
	リセット
	</button>
	</div>
	</div>
	<!-- current choosed person -->
	<div id="result_zone" class="name_display_box">
	選択した名前がここに表示されます
	</div>
	</body>
	</html>