学習計画と実績管理アプリ
学習計画一覧
実績一覧
「石の上にも三年」と言いますが、「石の上に学習計画を立てなければ、三年後にただの石です」
以下が、学習計画と実績を管理するアプリの実装例です。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>学習計画と実績管理</title>
</head>
<body>
<h1>学習計画と実績管理アプリ</h1>
<form>
<h2>学習計画</h2>
<label for="planSubject">教科名:</label>
<input type="text" id="planSubject" name="planSubject"><br><br>
<label for="planDate">日付:</label>
<input type="date" id="planDate" name="planDate"><br><br>
<label for="planContents">内容:</label><br>
<textarea id="planContents" name="planContents" rows="5" cols="30"></textarea><br><br>
<button type="button" onclick="addPlan()">追加</button>
</form>
<form>
<h2>実績入力</h2>
<label for="resultSubject">教科名:</label>
<input type="text" id="resultSubject" name="resultSubject"><br><br>
<label for="resultDate">日付:</label>
<input type="date" id="resultDate" name="resultDate"><br><br>
<label for="resultContents">内容:</label><br>
<textarea id="resultContents" name="resultContents" rows="5" cols="30"></textarea><br><br>
<button type="button" onclick="addResult()">追加</button>
</form>
<h2>学習計画一覧</h2>
<ul id="planList">
</ul>
<h2>実績一覧</h2>
<ul id="resultList">
</ul>
<script>
let planList = [];
let resultList = [];
function addPlan() {
// 入力されたデータを取得
let planSubject = document.getElementById('planSubject').value;
let planDate = document.getElementById('planDate').value;
let planContents = document.getElementById('planContents').value;
// 入力されたデータを配列に格納
let planData = {
subject: planSubject,
date: planDate,
contents: planContents
};
planList.push(planData);
// 一覧に追加
let planListElement = document.getElementById('planList');
let listElement = document.createElement('li');
listElement.textContent = planSubject + ':' + planDate + ' ' + planContents;
planListElement.appendChild(listElement);
}
function addResult() {
// 入力されたデータを取得
let resultSubject = document.getElementById('resultSubject').value;
let resultDate = document.getElementById('resultDate').value;
let resultContents = document.getElementById('resultContents').value;
// 入力されたデータを配列に格納
let resultData = {
subject: resultSubject,
date: resultDate,
contents: resultContents
};
resultList.push(resultData);
// 一覧に追加
let resultListElement = document.getElementById('resultList');
let listElement = document.createElement('li');
listElement.textContent = resultSubject + ':' + resultDate + ' ' + resultContents;
resultListElement.appendChild(listElement);
}
</script>
<p>「石の上にも三年」と言いますが、「石の上に学習計画を立てなければ、三年後にただの石です」</p>
</body>
</html>
```
上記のアプリでは、JavaScriptで配列に学習計画と実績のデータを格納し、それを一覧表示する機能を実装しています。また、表現豊かなジョークとして、「石の上にも三年」という言葉を引用し、学習計画が重要であることをアピールしています。