nora-tetsu/memo_example.html Secret

## memo_example.html
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta content='width=device-width,initial-scale=1.0,user-scalable=yes' name='viewport' />
    <title>Title</title>
    <style>
        body {
            padding: 20px 50px;
        }

        #input {
            width: 500px;
        }

        .item {
            white-space: pre-wrap;
        }

        .item:hover {
            background-color: #eee;
            cursor: default;
        }

        #explain {
            margin-top: 40px;
            font-size: 90%;
        }
    </style>
</head>

<body spellcheck="false">
    <h2>簡易メモアプリ</h2>
    <textarea id="input" rows="3" placeholder="好きな文字列を入力"></textarea>
    <button id="add-item">追加</button>
    <ul id="item-list"></ul>
    <div id="explain">
        <p>説明書き</p>
        <ul>
            <li>テキストエリアに入力して「追加」をクリックでメモを記録します。</li>
            <li>項目はダブルクリックで削除できます。</li>
            <li>マウスオーバーで追加日時を確認できます。</li>
            <li>保存機能は付けていないためリロードすると全て消去されます。</li>
    </div>
    </div>

    <script>
        const input = document.getElementById('input'); // 変数inputに入力欄のinput要素を代入する

        const button = document.getElementById('add-item'); // 変数buttonに追加ボタンのbutton要素を代入する
        button.addEventListener('click', addItem); // 追加ボタンをクリック時に関数addItemを実行させる

        const list = document.getElementById('item-list'); // 変数listに項目を表示する欄のul要素を代入する

        // 現在日時を取得して文字列にする関数
        function getDateAndTime() {
            const now = new Date(); // 現在時刻のDateインスタンス（情報が詰まったオブジェクト）

            // 数字を二桁に揃える（1→01にする）関数を作っておく
            function formatNumber(number) {
                return ('00' + number).slice(-2);
            }

            const year = now.getFullYear(); // 西暦4桁
            const month = formatNumber(now.getMonth() + 1); // 月（0始まりで取得するため1を加える）
            const date = formatNumber(now.getDate()); // 日
            const hour = formatNumber(now.getHours()); // 時
            const minute = formatNumber(now.getMinutes()); // 分

            return `${year}/${month}/${date} ${hour}:${minute}`; // YYYY/MM/DD hh:mm
        }

        // 入力欄の値から項目を生成する関数
        function addItem() {
            if (!input.value) return; // 入力欄が空ならreturn（処理の終了）

            const item = document.createElement('li'); // li要素を作る
            list.append(item); // 作ったli要素をul要素に追加する
            item.textContent = input.value; // 内容に入力欄の文字列を入れる
            item.classList.add('item'); // style適用のため「item」クラスをつける
            item.addEventListener('dblclick', removeItem); // ダブルクリック時に関数removeItemを実行させる
            item.title = getDateAndTime(); // 追加した日時をマウスオーバーで表示できるようにする

            input.value = ''; // 入力欄の文字列をクリアする
        }

        // 項目を削除する関数
        function removeItem() {
            const q = confirm('この項目を削除しますか？'); // ダイアログで確認する（回答がtrueまたはfalseで変数に代入される）
            if (!q) return; // OKでないならreturn

            this.remove(); // この関数が登録されている要素を削除する
        }

    </script>
</body>

</html>
	<html lang="ja">

	<head>
	<meta charset="utf-8">
	<meta content='width=device-width,initial-scale=1.0,user-scalable=yes' name='viewport' />
	<title>Title</title>
	<style>
	body {
	padding: 20px 50px;
	}

	#input {
	width: 500px;
	}

	.item {
	white-space: pre-wrap;
	}

	.item:hover {
	background-color: #eee;
	cursor: default;
	}

	#explain {
	margin-top: 40px;
	font-size: 90%;
	}
	</style>
	</head>

	<body spellcheck="false">
	<h2>簡易メモアプリ</h2>
	<textarea id="input" rows="3" placeholder="好きな文字列を入力"></textarea>
	<button id="add-item">追加</button>
	<ul id="item-list"></ul>
	<div id="explain">
	<p>説明書き</p>
	<ul>
	<li>テキストエリアに入力して「追加」をクリックでメモを記録します。</li>
	<li>項目はダブルクリックで削除できます。</li>
	<li>マウスオーバーで追加日時を確認できます。</li>
	<li>保存機能は付けていないためリロードすると全て消去されます。</li>
	</div>
	</div>

	<script>
	const input = document.getElementById('input'); // 変数inputに入力欄のinput要素を代入する

	const button = document.getElementById('add-item'); // 変数buttonに追加ボタンのbutton要素を代入する
	button.addEventListener('click', addItem); // 追加ボタンをクリック時に関数addItemを実行させる

	const list = document.getElementById('item-list'); // 変数listに項目を表示する欄のul要素を代入する

	// 現在日時を取得して文字列にする関数
	function getDateAndTime() {
	const now = new Date(); // 現在時刻のDateインスタンス（情報が詰まったオブジェクト）

	// 数字を二桁に揃える（1→01にする）関数を作っておく
	function formatNumber(number) {
	return ('00' + number).slice(-2);
	}

	const year = now.getFullYear(); // 西暦4桁
	const month = formatNumber(now.getMonth() + 1); // 月（0始まりで取得するため1を加える）
	const date = formatNumber(now.getDate()); // 日
	const hour = formatNumber(now.getHours()); // 時
	const minute = formatNumber(now.getMinutes()); // 分

	return `${year}/${month}/${date} ${hour}:${minute}`; // YYYY/MM/DD hh:mm
	}

	// 入力欄の値から項目を生成する関数
	function addItem() {
	if (!input.value) return; // 入力欄が空ならreturn（処理の終了）

	const item = document.createElement('li'); // li要素を作る
	list.append(item); // 作ったli要素をul要素に追加する
	item.textContent = input.value; // 内容に入力欄の文字列を入れる
	item.classList.add('item'); // style適用のため「item」クラスをつける
	item.addEventListener('dblclick', removeItem); // ダブルクリック時に関数removeItemを実行させる
	item.title = getDateAndTime(); // 追加した日時をマウスオーバーで表示できるようにする

	input.value = ''; // 入力欄の文字列をクリアする
	}

	// 項目を削除する関数
	function removeItem() {
	const q = confirm('この項目を削除しますか？'); // ダイアログで確認する（回答がtrueまたはfalseで変数に代入される）
	if (!q) return; // OKでないならreturn

	this.remove(); // この関数が登録されている要素を削除する
	}

	</script>
	</body>

	</html>