LoginSignup
0
0
@shirozuki0809

メモ取りツールをHTML、CSS、JavaScriptで作る

Last updated at Posted at 2024-08-19

このコードは、シンプルなメモ取りツールのHTML、CSS、JavaScriptで構成されています。以下に各部分の解説をします。

HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メモ取りツール</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #memo-container {
            width: 100%;
            max-width: 600px;
            margin: auto;
        }
        #memo-textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        #save-button, #load-button, #clear-button {
            display: block;
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
        }
        #save-button:hover, #load-button:hover, #clear-button:hover {
            background-color: #0056b3;
        }
        #memo-list {
            margin-top: 20px;
        }
        .memo-item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .edit-button, .delete-button {
            margin-left: 10px;
            padding: 5px 10px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .edit-button {
            background-color: #28a745;
            color: white;
        }
        .edit-button:hover {
            background-color: #218838;
        }
        .delete-button {
            background-color: #dc3545;
            color: white;
        }
        .delete-button:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
    <div id="memo-container">
        <textarea id="memo-textarea" placeholder="ここにメモを書いてください..."></textarea>
        <button id="save-button">保存</button>
        <button id="load-button">読み込み</button>
        <button id="clear-button">すべて削除</button>
        <div id="memo-list"></div>
    </div>
    <script>
        const saveButton = document.getElementById('save-button');
        const loadButton = document.getElementById('load-button');
        const clearButton = document.getElementById('clear-button');
        const memoTextarea = document.getElementById('memo-textarea');
        const memoList = document.getElementById('memo-list');

        saveButton.addEventListener('click', () => {
            const memoText = memoTextarea.value;
            if (memoText.trim() === '') {
                alert('メモを入力してください。');
                return;
            }

            const memoId = new Date().getTime().toString();
            localStorage.setItem(memoId, memoText);
            alert('メモが保存されました。');
            memoTextarea.value = '';
            displayMemos();
        });

        loadButton.addEventListener('click', displayMemos);

        clearButton.addEventListener('click', () => {
            localStorage.clear();
            alert('全てのメモが削除されました。');
            displayMemos();
        });

        function displayMemos() {
            memoList.innerHTML = '';
            for (let i = 0; i < localStorage.length; i++) {
                const memoId = localStorage.key(i);
                const memoText = localStorage.getItem(memoId);

                const memoItem = document.createElement('div');
                memoItem.className = 'memo-item';
                memoItem.innerHTML = `
                    <span>${memoText}</span>
                    <div>
                        <button class="edit-button" onclick="editMemo('${memoId}')">編集</button>
                        <button class="delete-button" onclick="deleteMemo('${memoId}')">削除</button>
                    </div>
                `;
                memoList.appendChild(memoItem);
            }
        }

        function editMemo(memoId) {
            const memoText = localStorage.getItem(memoId);
            memoTextarea.value = memoText;
            localStorage.removeItem(memoId);
        }

        function deleteMemo(memoId) {
            localStorage.removeItem(memoId);
            displayMemos();
        }

        window.addEventListener('load', displayMemos);
    </script>
</body>
</html>

修正版コードも掲載します。こちらにて感謝申し上げます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メモ取りツール</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #memo-container {
            width: 100%;
            max-width: 600px;
            margin: auto;
        }
        #memo-textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        #save-button, #load-button, #clear-button {
            display: block;
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
        }
        #save-button:hover, #load-button:hover, #clear-button:hover {
            background-color: #0056b3;
        }
        #memo-list {
            margin-top: 20px;
        }
        .memo-item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .edit-button, .delete-button {
            margin-left: 10px;
            padding: 5px 10px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .edit-button {
            background-color: #28a745;
            color: white;
        }
        .edit-button:hover {
            background-color: #218838;
        }
        .delete-button {
            background-color: #dc3545;
            color: white;
        }
        .delete-button:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
    <div id="memo-container">
        <textarea id="memo-textarea" placeholder="ここにメモを書いてください..."></textarea>
        <button id="save-button">保存</button>
        <button id="load-button">読み込み</button>
        <button id="clear-button">すべて削除</button>
        <div id="memo-list"></div>
    </div>
    <script>
'use strict';
const storageId = 'memo';
const memoTextarea = document.getElementById('memo-textarea');
const memoList = document.getElementById('memo-list');

let editId;
let storage = JSON.parse(localStorage.getItem(storageId)) ?? {};

const displayMemos = () => {
  memoList.textContent = '';
  for (const [id, value] of Object.entries(storage)) {
    memoList.insertAdjacentHTML('beforeend', `
      <div class='memo-item'>
        <span id="t${id}"></span>
        <div>
            <button class="edit-button" id="e${id}">編集</button>
            <button class="delete-button" id="d${id}">削除</button>
        </div>
      </div>
    `);
    memoList.querySelector(`#t${id}`).innerText = value;
  }
  memoTextarea.value = '';
  editId = void 0;
};
displayMemos();

const saveStorage = (value, id = Date.now()) => {
  if (value.trim() === '') {
    alert('メモを入力して下さい');
    return;
  }
  storage[editId ?? id] = value;
  localStorage.setItem(storageId, JSON.stringify(storage));
  displayMemos();
};

document.getElementById('memo-container').addEventListener('click', event => {
  const target = event.target;
  if (target.nodeName !== 'BUTTON') return;

  if (target.id === 'save-button') {
    saveStorage(memoTextarea.value);
    memoTextarea.value = '';
  }
  else if (target.id === 'load-button') {
    displayMemos();
  }
  else if (target.id === 'clear-button') {
    if (!confirm('全てのメモを削除しますか')) return;
    localStorage.removeItem(storageId);
    storage = {};
    displayMemos();
  }
  else if (/e\d+/.test(target.id)) {
    memoTextarea.value = storage[editId = target.id.match(/\d+/)];
  }
  else if (/d\d+/.test(target.id)) {
    const deleteId = target.id.match(/\d+/);
    if (!confirm(`${storage[deleteId].slice(0, 20)} ...\n\nを削除しますか`)) return;
    delete storage[deleteId];
    localStorage.setItem(storageId, JSON.stringify(storage));
    displayMemos();
  }
});

window.addEventListener('beforeunload', () => {
  const value = memoTextarea.value.trim();
  if (value === '') return;
  saveStorage(`${value}\n\n== ${new Date().toLocaleString('ja', {dateStyle: 'medium', timeStyle: 'medium'})} 自動保存 ==`);
});
    </script>
</body>
</html>
  • saveButtonとmemoTextareaの要素を取得します。
  • saveButtonにクリックイベントリスナーを追加し、メモをローカルストレージに保存します。
  • ページロード時にローカルストレージから保存されたメモを取得し、テキストエリアに表示します。

完成形はこんな感じになります。ご意見くださった方、ありがとうございます。

See the Pen Untitled by 城好き (@shirozuki0809) on CodePen.

0
0
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0