Lycolia/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Slack Reminder Creator</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script>
    const inputState = {
      chName: '',
      message: '',
      startTime: '',
      endTime: '',
      sunday: '',
      monday: '',
      tuesday: '',
      wednesday: '',
      thursday: '',
      friday: '',
      saturday: ''
    };

    const getInputElements = () => {
      const chName = document.getElementById('ch-name');
      const message = document.getElementById('message');
      const startTime = document.getElementById('start-time');
      const sunday = document.getElementById('sunday');
      const monday = document.getElementById('monday');
      const tuesday = document.getElementById('tuesday');
      const wednesday = document.getElementById('wednesday');
      const thursday = document.getElementById('thursday');
      const friday = document.getElementById('friday');
      const saturday = document.getElementById('saturday');

      return {
        chName,
        message,
        startTime,
        sunday,
        monday,
        tuesday,
        wednesday,
        thursday,
        friday,
        saturday
      };
    };

    const getWeekdayText = () => {
      const weekdays = [
        inputState.sunday,
        inputState.monday,
        inputState.tuesday,
        inputState.wednesday,
        inputState.thursday,
        inputState.friday,
        inputState.saturday
      ];

      const weekdayText = weekdays.filter(v => v !== '').reduce((acc, cur) => {
        return `${acc}${cur}, `;
      }, '').replace(/, $/, '');

      return weekdayText === '' ? '' : `every ${weekdayText}`;
    };

    const getOutputText = () => {
      const weekdayText = getWeekdayText();
      return `/remind ${inputState.chName} "${inputState.message}" at ${inputState.startTime} ${weekdayText}`.replace(/ $/, '');
    };

    const renderOutput = (output) => {
      output.innerText = getOutputText();
    };

    const applyInputState = (render, ref, name, formatter) => {
      const format = formatter === undefined ? (val) => val : formatter;
      ref[name]['oninput'] = ((ev) => {
        inputState[name] = format(ev.target.value);
        render();
      });
    };

    const applyCheckState = (render, ref, name) => {
      ref[name]['onchange'] = ((ev) => {
        inputState[name] = ev.target.checked ? name : '';
        render();
      });
    };

    const copyToClipboard = (text) => {
      const textarea = document.createElement('textarea');
      textarea.style.top = '0';
      textarea.style.left = '0';
      textarea.style.position = 'fixed';
      document.body.appendChild(textarea);

      textarea.value = text;
      textarea.focus();
      textarea.select();
      document.execCommand('copy');

      document.body.removeChild(textarea);
    };

    const registerEventListener = () => {
      const output = document.getElementById('output');
      output.ondblclick = (ev) => {
        copyToClipboard(ev.target.innerText);
      };
      const render = () => {
        renderOutput(output);
      };
      const form = getInputElements();

      applyInputState(render, form,'chName', (val) => val.match(/^#/) === null ? `#${val}` : val);
      applyInputState(render, form,'message');
      applyInputState(render, form,'startTime');
      applyCheckState(render, form, 'sunday');
      applyCheckState(render, form, 'monday');
      applyCheckState(render, form, 'tuesday');
      applyCheckState(render, form, 'wednesday');
      applyCheckState(render, form, 'thursday');
      applyCheckState(render, form, 'friday');
      applyCheckState(render, form, 'saturday');
    }

    window.onload = () => {
      registerEventListener();
    }
  </script>
  <style>
    #root_container {
      width: fit-content;
    }

    fieldset {
      width: 100%;
      margin-bottom: 1em;
    }

    .input_item {
      margin-bottom: 0.5em;
      display: flex;
      flex-direction: row;
    }

    .input_label {
      width: 100px;
      display: block;
    }

    #ch-name {
      width: 45em;
    }

    #message {
      width: 45em;
      height: 3em;
    }
  </style>
</head>
<body>

  <div id="root_container">
    <fieldset>
      <legend>入力</legend>
      <div class="input_item">
        <label class="input_label" for="ch-name">チャンネル名</label>
        <input id="ch-name" name="ch-name" type="text">
      </div>

      <div class="input_item">
        <label class="input_label" for="message">メッセージ</label>
        <textarea id="message" name="message"></textarea>
      </div>

      <div class="input_item">
        <label class="input_label" for="start-time">開始時刻</label>
        <input id="start-time" name="start-time" type="time">
      </div>

      <div class="input_item">
        <div class="input_label">曜日</div>
        <div>
          <input id="sunday" name="日曜日" type="checkbox" value="sunday">
          <label for="sunday">日曜日</label>

          <input id="monday" name="月曜日" type="checkbox" value="monday">
          <label for="monday">月曜日</label>

          <input id="tuesday" name="火曜日" type="checkbox" value="tuesday">
          <label for="tuesday">火曜日</label>

          <input id="wednesday" name="水曜日" type="checkbox" value="wednesday">
          <label for="wednesday">水曜日</label>

          <input id="thursday" name="木曜日" type="checkbox" value="thursday">
          <label for="thursday">木曜日</label>

          <input id="friday" name="金曜日" type="checkbox" value="friday">
          <label for="friday">金曜日</label>

          <input id="saturday" name="土曜日" type="checkbox" value="saturday">
          <label for="saturday">土曜日</label>
        </div>
      </div>
    </fieldset>

    <fieldset>
      <legend>出力</legend>
      <p id="output">/remind </p>
    </fieldset>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>Slack Reminder Creator</title>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<script>
	const inputState = {
	chName: '',
	message: '',
	startTime: '',
	endTime: '',
	sunday: '',
	monday: '',
	tuesday: '',
	wednesday: '',
	thursday: '',
	friday: '',
	saturday: ''
	};

	const getInputElements = () => {
	const chName = document.getElementById('ch-name');
	const message = document.getElementById('message');
	const startTime = document.getElementById('start-time');
	const sunday = document.getElementById('sunday');
	const monday = document.getElementById('monday');
	const tuesday = document.getElementById('tuesday');
	const wednesday = document.getElementById('wednesday');
	const thursday = document.getElementById('thursday');
	const friday = document.getElementById('friday');
	const saturday = document.getElementById('saturday');

	return {
	chName,
	message,
	startTime,
	sunday,
	monday,
	tuesday,
	wednesday,
	thursday,
	friday,
	saturday
	};
	};

	const getWeekdayText = () => {
	const weekdays = [
	inputState.sunday,
	inputState.monday,
	inputState.tuesday,
	inputState.wednesday,
	inputState.thursday,
	inputState.friday,
	inputState.saturday
	];

	const weekdayText = weekdays.filter(v => v !== '').reduce((acc, cur) => {
	return `${acc}${cur}, `;
	}, '').replace(/, $/, '');

	return weekdayText === '' ? '' : `every ${weekdayText}`;
	};

	const getOutputText = () => {
	const weekdayText = getWeekdayText();
	return `/remind ${inputState.chName} "${inputState.message}" at ${inputState.startTime} ${weekdayText}`.replace(/ $/, '');
	};

	const renderOutput = (output) => {
	output.innerText = getOutputText();
	};

	const applyInputState = (render, ref, name, formatter) => {
	const format = formatter === undefined ? (val) => val : formatter;
	ref[name]['oninput'] = ((ev) => {
	inputState[name] = format(ev.target.value);
	render();
	});
	};

	const applyCheckState = (render, ref, name) => {
	ref[name]['onchange'] = ((ev) => {
	inputState[name] = ev.target.checked ? name : '';
	render();
	});
	};

	const copyToClipboard = (text) => {
	const textarea = document.createElement('textarea');
	textarea.style.top = '0';
	textarea.style.left = '0';
	textarea.style.position = 'fixed';
	document.body.appendChild(textarea);

	textarea.value = text;
	textarea.focus();
	textarea.select();
	document.execCommand('copy');

	document.body.removeChild(textarea);
	};

	const registerEventListener = () => {
	const output = document.getElementById('output');
	output.ondblclick = (ev) => {
	copyToClipboard(ev.target.innerText);
	};
	const render = () => {
	renderOutput(output);
	};
	const form = getInputElements();

	applyInputState(render, form,'chName', (val) => val.match(/^#/) === null ? `#${val}` : val);
	applyInputState(render, form,'message');
	applyInputState(render, form,'startTime');
	applyCheckState(render, form, 'sunday');
	applyCheckState(render, form, 'monday');
	applyCheckState(render, form, 'tuesday');
	applyCheckState(render, form, 'wednesday');
	applyCheckState(render, form, 'thursday');
	applyCheckState(render, form, 'friday');
	applyCheckState(render, form, 'saturday');
	}

	window.onload = () => {
	registerEventListener();
	}
	</script>
	<style>
	#root_container {
	width: fit-content;
	}

	fieldset {
	width: 100%;
	margin-bottom: 1em;
	}

	.input_item {
	margin-bottom: 0.5em;
	display: flex;
	flex-direction: row;
	}

	.input_label {
	width: 100px;
	display: block;
	}

	#ch-name {
	width: 45em;
	}

	#message {
	width: 45em;
	height: 3em;
	}
	</style>
	</head>
	<body>

	<div id="root_container">
	<fieldset>
	<legend>入力</legend>
	<div class="input_item">
	<label class="input_label" for="ch-name">チャンネル名</label>
	<input id="ch-name" name="ch-name" type="text">
	</div>

	<div class="input_item">
	<label class="input_label" for="message">メッセージ</label>
	<textarea id="message" name="message"></textarea>
	</div>

	<div class="input_item">
	<label class="input_label" for="start-time">開始時刻</label>
	<input id="start-time" name="start-time" type="time">
	</div>

	<div class="input_item">
	<div class="input_label">曜日</div>
	<div>
	<input id="sunday" name="日曜日" type="checkbox" value="sunday">
	<label for="sunday">日曜日</label>

	<input id="monday" name="月曜日" type="checkbox" value="monday">
	<label for="monday">月曜日</label>

	<input id="tuesday" name="火曜日" type="checkbox" value="tuesday">
	<label for="tuesday">火曜日</label>

	<input id="wednesday" name="水曜日" type="checkbox" value="wednesday">
	<label for="wednesday">水曜日</label>

	<input id="thursday" name="木曜日" type="checkbox" value="thursday">
	<label for="thursday">木曜日</label>

	<input id="friday" name="金曜日" type="checkbox" value="friday">
	<label for="friday">金曜日</label>

	<input id="saturday" name="土曜日" type="checkbox" value="saturday">
	<label for="saturday">土曜日</label>
	</div>
	</div>
	</fieldset>

	<fieldset>
	<legend>出力</legend>
	<p id="output">/remind </p>
	</fieldset>
	</div>
	</body>
	</html>