mopeneko/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <style>
.error-message {
  visibility: hidden
}

.visible {
  visibility: visible;
}
    </style>
  </head>
  <body>
    <section class="hero">
      <div class="hero-body">
        <h1 class="title">
          LINE Notify Sender
        </h1>
        <p class="subtitle">
          LINE Notifyをブラウザから簡単に扱えます
        </p>
      </div>
    </section>
    <div class="container">
      <input id="token" class="input" type="text" placeholder="LINE Notifyトークン">
      <textarea id="message" class="textarea mt-3" placeholder="メッセージ" max="1000"></textarea>
      <div class="has-text-centered">
        <button id="submit" class="button is-primary mt-3">送信</button>
      </div>
      <div id="error-message" class="notification is-danger mt-3 error-message"></div>
    </div>
  </body>

  <script>
const el = document.querySelector('#submit');
el.addEventListener('click', () => {
  const token = document.querySelector('#token').value;
  const message = document.querySelector('#message').value;

  const errEl = document.querySelector('#error-message');
  errEl.classList.remove('visible');

  fetch('https://cors-anywhere.herokuapp.com/https://notify-api.line.me/api/notify', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `message=${encodeURI(message)}`,
  })
    .catch((e) => {
      console.log(errEl.classList);
      errEl.classList.add('visible');
      errEl.innerText = e.message;
    });
});
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello Bulma!</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
	<style>
	.error-message {
	visibility: hidden
	}

	.visible {
	visibility: visible;
	}
	</style>
	</head>
	<body>
	<section class="hero">
	<div class="hero-body">
	<h1 class="title">
	LINE Notify Sender
	</h1>
	<p class="subtitle">
	LINE Notifyをブラウザから簡単に扱えます
	</p>
	</div>
	</section>
	<div class="container">
	<input id="token" class="input" type="text" placeholder="LINE Notifyトークン">
	<textarea id="message" class="textarea mt-3" placeholder="メッセージ" max="1000"></textarea>
	<div class="has-text-centered">
	<button id="submit" class="button is-primary mt-3">送信</button>
	</div>
	<div id="error-message" class="notification is-danger mt-3 error-message"></div>
	</div>
	</body>

	<script>
	const el = document.querySelector('#submit');
	el.addEventListener('click', () => {
	const token = document.querySelector('#token').value;
	const message = document.querySelector('#message').value;

	const errEl = document.querySelector('#error-message');
	errEl.classList.remove('visible');

	fetch('https://cors-anywhere.herokuapp.com/https://notify-api.line.me/api/notify', {
	method: 'POST',
	headers: {
	'Authorization': `Bearer ${token}`,
	'Content-Type': 'application/x-www-form-urlencoded',
	},
	body: `message=${encodeURI(message)}`,
	})
	.catch((e) => {
	console.log(errEl.classList);
	errEl.classList.add('visible');
	errEl.innerText = e.message;
	});
	});
	</script>
	</html>