#今回、実装したかったのはコチラ
実装デモ
-
当初、
<input type= checkbox>と<label>テキスト</label>が別々に生成され、紐付けもされず苦労した。 -
そこでまず、
<label>に<input>を追加 -
次に
<input>に<textnode>を追加 -
出来上がった
<label>を<li>に追加するという手順を踏んで実装。
#【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do リスト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="To-do-list">
<h1>To do リスト</h1>
<h2 id="today"></h2>
<input type="text">
<button>追加</button>
<button id="done">完了</button>
<ul>
<!-- <li><label><input type="checkbox">買い物</label></li>
<li><label><input type="checkbox">読書</label></li>
<li><label><input type="checkbox">犬の散歩</label></li> -->
</ul>
</div>
<script src ="js/main.js"></script>
</body>
</html>
#【CSS】
body {
background: #a1d8e2;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 15px;
}
.To-do-list {
width: 500px;
margin: 20px ;
}
ul {
margin-top: 30px;
padding: 0;
}
li {
list-style: none;
user-select: none;
}
input[type='checkbox'] {
margin-right: 15px;
}
#【JavaScript】
'use strict';
{
//------------------------------今日の日付を取得-------------------------------------//
let date = new Date();
let month = date.getMonth() + 1;
let year = date.getFullYear();
let day = date.getDate();
document.getElementById("today").textContent = `${year}年${month}月${day}日`;
//-----------------------------------End-----------------------------------------//
//====================== クリックイベント 追加＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝=============//
document.querySelector('button').addEventListener('click', () => {
const li = document.createElement('li');
const text = document.querySelector('input'); //html内のinput を選択
const label = document.createElement('label');
const input = document.createElement('input');//新たにinputを生成
input.type = 'checkbox';
const ul = document.querySelector('ul');
li.appendChild(label);
label.appendChild(input);
label.appendChild(document.createTextNode(`${text.value}`));
ul.appendChild(li);//labelにinputを追加した後、textnodeを追加。
//その出来上がったlabelをliに追加してulに追加するということを実行
text.value = '';
text.focus();
});
//======================================End==========================================//
//||||||||||||||||||||||||| クリックイベント 削除|||||||||||||||||||||||||||||||||||||||||||//
document.getElementById('done').addEventListener('click', () => {
const fineshed = document.querySelectorAll('li')[0];
//完了ボタンをクリックしたら、一番上のliが削除される
fineshed.remove();
});
}
//||||||||||||||||||||||||||||||||||End||||||||||||||||||||||||||||||||||||||||||||||//