<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>簡易掲示板</title>
</head>
<body>
<link rel="stylesheet" href="./style.css"/>
  <h1>掲示板</h1>
  <div id="thread-list"></div>
  <form id="new-thread-form">
    <label for="name">名前:</label>
    <input type="text" id="name">
    <br>
    <label for="message">本文:</label>
    <textarea id="message" cols="64"></textarea>
    <br>
    <button type="submit" onclick="postMsg()">投稿</button>
                                      <br><br><br><br>
    <button type="submit" onclick="clearMsg()">全データクリア</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

JavaScript

script.js

// script.js

const threadList = document.getElementById('thread-list');
const newThreadForm = document.getElementById('new-thread-form');

var threads = [];

// ローカルストレージから読み込み.
function loadThreads() {
  const s1 = localStorage.getItem('data');
  if(s1 != '') {
	threads = JSON.parse( s1 );
  }
}
// スレッドデータをHTMLに変換する関数
function threadToHTML(thread) {
  return `
    <div class="thread">
      <div class="thread-name">${thread.name}</div>
      <div class="thread-message">${thread.message}</div>
    </div>
  `;
}
// スレッドを表示する関数
function displayThreads() {
  threadList.innerHTML = '';
  threads.forEach(thread => {
    threadList.innerHTML += threadToHTML(thread);
  });
}
// 新しいスレッドを追加する関数
function addThread(name, message) {
  threads.push({ name, message });
  displayThreads();
  // ローカルストレージに保管.
  const s1 = JSON.stringify(threads);
  localStorage.setItem('data', s1 );
}
// ローカルストレージ全消去.
function clearThread() {
  threads=[];
  // ローカルストレージに保管.
  const s1 = JSON.stringify(threads);
  localStorage.setItem('data', s1 );
}
// 投稿ボタン OnClick
function postMsg() {
  const name = document.getElementById('name').value;
  const message = document.getElementById('message').value;
  if((name!="")&&(message!="")) {
     addThread(name, message);
  }
  newThreadForm.reset();
}
// 全消去ボタン OnClick
function clearMsg() {
  clearThread();
}
// 最初のスレッドを表示する
// addThread('テストユーザー', 'これはテストスレッドです。');
loadThreads();
displayThreads();
//

いらないかもだけど、CSS

style.css

/* style.css */

body {
  font-family: sans-serif;
}

*hread-list {
  margin-bottom: 20px;
}

.thread {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.thread-name {
  font-weight: bold;
}

.thread-message {
  margin-top: 5px;
}

以上、JavaScript全くの初心者が人工知能に頼んで書いてもらったもの（を悪戦苦闘した結果）、でした。

スクショ

↑

で、？†

全クリアボタンはユーザーには見せないほうがいいでしょう。
投稿と同時に、なんらかのサーバーレスなストレージとか、自分のサイトに投稿ログを送信することで、投稿を集めることが可能。
どんなに荒らされても、荒らしたデータは、その荒した人のブラウザのローカルストレージの中・・・というオチが楽しい。
自分用のメモ帳にも使えるかな。スマホとかで。ただし、異なるブラウザではデータは参照できません。
もちろん、ブラウザのローカルストレージから投稿データを取得したり追加したりするかわりに、なんらかの外部ストレージ（Web API?）に保存したり参照したりすることが出来るように改造すれば、普通に掲示板になり得るかと・・・。
（ただし、やるとは言ってない）

ログインまたはアカウント作成

最新の20件

Poem/JavaScriptBBS

これはもしかしたら、ジョークプログラムかも、とお思いの皆さん・†

思い付きの発端†

やってみた。†

で、？†