TODOリストを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルを作ろう

入力欄・追加ボタン・リスト表示エリアを配置しましょう。

💡 ヒント
index.html, style.css, script.js の3ファイルを作り、HTMLからCSSとJSを読み込みます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>TODOリスト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <h1>📝 TODOリスト</h1>
    <div class="input-area">
      <input id="task-input" placeholder="タスクを入力">
      <button id="add-btn">追加</button>
    </div>
    <ul id="list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>
2

タスク追加の処理を書こう

追加ボタンをクリックしたとき、入力欄のテキストをリストに追加する処理を書きましょう。空欄のときは追加しないようにします。

💡 ヒント
追加ボタンのclickイベントで、input の値を取得し、li 要素を作って ul に追加します。追加後は input を空にしましょう。

参考: JS レッスン6: DOM操作

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

const input = document.getElementById("task-input");
const list = document.getElementById("list");
const addBtn = document.getElementById("add-btn");

addBtn.addEventListener("click", function() {
  if (input.value.trim() === "") return;
  addTask(input.value.trim());
  input.value = "";
});

function addTask(text) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.textContent = text;
  li.appendChild(span);
  list.appendChild(li);
}
3

完了切り替え機能を追加しよう

タスクのテキストをクリックしたら、取り消し線がつく（完了状態になる）ようにしましょう。

💡 ヒント
span をクリックしたとき、classList.toggle('done') で完了/未完了を切り替えます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

// addTask 関数内に追加
span.addEventListener("click", function() {
  span.classList.toggle("done");
});
4

削除ボタンを追加しよう

各タスクに削除ボタンをつけて、クリックでタスクを消せるようにしましょう。

💡 ヒント
各 li に削除ボタンを追加し、クリックで li.remove() を呼びます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

// addTask 関数内に追加
const delBtn = document.createElement("button");
delBtn.textContent = "削除";
delBtn.className = "del-btn";
delBtn.addEventListener("click", function() {
  li.remove();
});
li.appendChild(delBtn);
5

Enterキーでも追加できるようにしよう

Enterキーを押してもタスクが追加されるようにしましょう。

💡 ヒント
input に keydown イベントを登録し、event.key === 'Enter' のとき追加処理を実行します。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

input.addEventListener("keydown", function(e) {
  if (e.key === "Enter") {
    addBtn.click();
  }
});
6

CSSでデザインを整えて完成！

CSSでカードデザイン、完了状態のスタイル、削除ボタンの色を整えて完成です！

💡 ヒント
カードを中央配置し、完了タスクに取り消し線（text-decoration: line-through）をつけます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

* { box-sizing: border-box; margin: 0; }
body { font-family: sans-serif; background: #f5f5f5; display: flex; justify-content: center; padding: 40px 16px; }
.app { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 32px; width: 360px; }
h1 { font-size: 1.3rem; color: #333; margin-bottom: 16px; text-align: center; }
.input-area { display: flex; gap: 8px; margin-bottom: 16px; }
input { flex: 1; padding: 10px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 14px; }
button { padding: 10px 16px; border: none; border-radius: 8px; background: #3a86ff; color: #fff; cursor: pointer; }
ul { list-style: none; padding: 0; }
li { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid #eee; }
.done { text-decoration: line-through; color: #aaa; }
.del-btn { margin-left: auto; background: #ff6b6b; padding: 4px 10px; font-size: 12px; border-radius: 6px; }
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら