問題 1: カウンターアプリ
課題: ボタンをクリックするたびにカウンターが1ずつ増えるシンプルなカウンターアプリを作成してください。
要件:
- 初期カウントは0。
- ボタンをクリックするたびにカウントが1増える。
- 現在のカウントを表示する。
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>カウンターアプリ</title> </head> <body> <div> <h1>カウント: <span id="count">0</span></h1> <button id="incrementBtn">カウントを増やす</button> </div> <script src="counter.js"></script> </body> </html>
JavaScript (counter.js):
document.addEventListener('DOMContentLoaded', () => { let count = 0; const countDisplay = document.getElementById('count'); const incrementBtn = document.getElementById('incrementBtn'); incrementBtn.addEventListener('click', () => { count++; countDisplay.textContent = count; }); });
問題 2: 簡易ToDoリスト
課題: 新しいタスクを追加できる簡易ToDoリストを作成してください。
要件:
- テキストボックスにタスクを入力し、"追加"ボタンを押すとタスクがリストに追加される。
- 各タスクの横には削除ボタンがあり、クリックするとタスクがリストから削除される。
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ToDoリスト</title> </head> <body> <div> <input type="text" id="taskInput" placeholder="タスクを入力"> <button id="addTaskBtn">追加</button> <ul id="taskList"></ul> </div> <script src="todo.js"></script> </body> </html>
JavaScript (todo.js):
document.addEventListener('DOMContentLoaded', () => { const taskInput = document.getElementById('taskInput'); const addTaskBtn = document.getElementById('addTaskBtn'); const taskList = document.getElementById('taskList'); addTaskBtn.addEventListener('click', () => { const taskText = taskInput.value.trim(); if (taskText === '') return; const listItem = document.createElement('li'); listItem.textContent = taskText; const deleteBtn = document.createElement('button'); deleteBtn.textContent = '削除'; deleteBtn.addEventListener('click', () => { taskList.removeChild(listItem); }); listItem.appendChild(deleteBtn); taskList.appendChild(listItem); taskInput.value = ''; }); });
問題 3: シンプルな電卓
課題: 基本的な加算、減算、乗算、除算ができるシンプルな電卓を作成してください。
要件:
- 2つの数値を入力し、演算子を選択して計算ボタンを押すと結果を表示する。
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>シンプルな電卓</title> </head> <body> <div> <input type="number" id="num1" placeholder="数値1"> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="number" id="num2" placeholder="数値2"> <button id="calculateBtn">計算</button> <h2>結果: <span id="result"></span></h2> </div> <script src="calculator.js"></script> </body> </html>
JavaScript (calculator.js):
document.addEventListener('DOMContentLoaded', () => { const num1 = document.getElementById('num1'); const operator = document.getElementById('operator'); const num2 = document.getElementById('num2'); const calculateBtn = document.getElementById('calculateBtn'); const resultDisplay = document.getElementById('result'); calculateBtn.addEventListener('click', () => { const value1 = parseFloat(num1.value); const value2 = parseFloat(num2.value); const operatorValue = operator.value; let result; switch(operatorValue) { case '+': result = value1 + value2; break; case '-': result = value1 - value2; break; case '*': result = value1 * value2; break; case '/': result = value1 / value2; break; default: result = 'エラー'; } resultDisplay.textContent = result; }); });
