DOMでToDoアプリ作成

まずはあらすじとシナリオを考える。

![ToDoappDOM-Page-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/2e512c29-59e1-0498-efff-b16d3cfb4cfd.png)

こっちがあらすじである

![ToDoappDOM-Page-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/59966ceb-d812-b3ab-f920-2c787789c7ca.png)

こっちがシナリオである

比較的やさしいtodoリストであるから莫大な量になったりはしないと思うが、1つ1つの処理を確実に書いていく必要がある


まずはオブジェクトを作成する

```js
const textInput = document.getElementById("textInput");
const listAddBtn = document.getElementById("listAdd");
const newItem = document.createElement("li");
const list =document.getElementById("list")
```

それからボタンを押したときに追加されるようにaddEventListenerを書く

```js
textAdd.addEventListener("click", (event) => {
    const newItem = document.createElement("li")
    const count = (list.children.length+1)
    newItem.textContent = count + document.getElementById("textInput").value
   　list.append(newItem) 
})
```
これで追加ボタンを押したら、インデックス番号と文字の中身が表示されるようになった

>https://developer.mozilla.org/ja/docs/Web/API/Node/childNodes


それから削除ボタンも追加するので

```js
const removeBtn = document.createElement("button") 
    removeBtn.innerText = " 削除";
    newItem.appendChild(removeBtn)
    removeBtn.addEventListener("click", (event) => {
        newItem.remove()
    })
```
ここまでリストの追加と削除が行えるようになった。

後は削除した時にそのリストの番号を詰めて再度表示しなおして番号を詰める事が必要だ。

##番号をつける

方法としては削除をクリックしたときにToDoリスト全体を更新しなおす方法を検討する。
要は削除したら残っているdomをすべて読み込み、中身はそのまま出力して、番号だけ要素の数を再集計してインデックス番号に+1して表示させたいと思う。

```js
var remItem = document.querySelectorAll("li")
        console.log(remItem)
```
何となくしっくりこなかったなのでfor文で回してみる

```js
 removeBtn.addEventListener("click", (event) => {
        newItem.remove()
        for (var i = 0; i < list.children.length; i++){
            var remItem = document.querySelector("li")
            console.log(remItem)
            const count2 = (list.children.length+1)
            newItem.textContent = count2 + document.getElementById("textInput").value
        }
    })
```
これでは削除したリストが影響を受けて残っているリストに反映されない。



###答えを確認した所、、、
入力したTodoタスクの一覧を保持する配列を定義していたところが違っていた
  const todos = [];
自分が1個1個の処理が出来なかったのはここに原因があると思う。
配列を定義していたら後々1つずつの処理が容易にできたはずである。



なぜか```removeBtn```が読み込まれない
関数と変数が一緒だったが変えたら実行できた

> https://teratail.com/questions/275576
https://qiita.com/atlansien/items/c582fe2c6d5af943e55c


##　どこにひっかったのか
→番号を消したときに変更する処理

##　なぜ
→1つ1つの答えを処理できる形で出力できなかった
後々変更が入るものは変数で出力すべきだった

##どんな知識が必要だったか
状況に応じて中身を変更させる知識

##どんな勉強をしていけば出来るようになるのか
これに似たコードを読んでみる
中身が動くもの
フィルタリングとかについての勉強



##ドラック&ドロップ
≻https://blog.ver001.com/javascript-dragdrop-sort/
https://www.ipentec.com/document/javascript-list-sortable-item
https://ja.javascript.info/mouse-drag-and-drop

###更にドラック&ドロップを実装して順番を変える

記事を参考にそのまま書いてみた

```js
document.querySelectorAll('.drag-list li').forEach (elm => {
	elm.ondragstart = function () {
		event.dataTransfer.setData('text/plain', event.target.id);
	};
	elm.ondragover = function () {
		event.preventDefault();
		this.style.borderTop = '2px solid blue';
	};
	elm.ondragleave = function () {
		this.style.borderTop = '';
	};
	elm.ondrop = function () {
		event.preventDefault();
		let id = event.dataTransfer.getData('text/plain');
		let elm_drag = document.getElementById(id);
		this.parentNode.insertBefore(elm_drag, this);
		this.style.borderTop = '';
	};
});
```
ほぼコピペに近いが一応書いてみた
初めてみるメソッドが多い.....
この時に起きた問題が
・クリックできない
・vscodeに```event```が非推奨だと言われる





・クリック出来ない問題
原因を探索
1.```.list```を```#list```に修正

2.クリックされた時の処理の```showTodo```いかに入れてみたら```setDataが未定義だと言われた。
setDataについて調べてみる→
≻https://developer.mozilla.org/ja/docs/Web/API/DataTransfer/setData

3．draggableが機能してるか確認
デベロッパーツールで確認したらついてたが動かなかった
一応htmlでliにdraggable属性をつけてみて動くか確認した所動かなった
だからdraggableについて調べてみる
そしたらdarggableはjqのライブラリjquery UIにもあるとわかったが今回はhtml属性のdraggableを使いたいと思う。
調べたところ概ね間違っていなさそう

4．答えをコピペして弄ってみる
そしたらidを振っていないとドラック&ドロップしても反映されない（ドラック&ドロップは出来る）

そうするとCSSの```cursor:pointer```によって左右されている事がわかった。


####しかしドラックが出来てもドロップが出来ない。
正しい方にはドラックした時に青線が出てきているが、自分が書いたものには出てこないので、そこに問題があると思う。

確認した所```querySelectorAllが間違っていたので修正したら青線で出て無事に変更することが出来た。


それからドラック&ドロップしたときに番号も変更できるようにしたい。
ドラック&ドロップしたときにshowTodosで出来るかもしれないのでやってみる。
しかしドラック&ドロップ関数の最後に追加したら青線も出なくなってしまった。


###削除ボタンを押してからドラック&ドロップが出来なくなった。
追加ボタンの所に書いてあったのをshowTodosの最後に持ってきたら使えるようになった。


###もし追加or削除ボタンで更新したくないなら
前のバージョンで配列に入れないリストを作ればいけると思う。

≻draggableについて
https://www.pazru.net/html5/DragDrop/010.html


4．text/plainとは


・なぜeventは非推奨なのか
単純に引数にeventを記述すれば問題なくなった

≻https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault



draggableとは
>https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/draggable
論理型ではなく、列挙型属性とは？

###ドラック&ドロップしてdoingとdoneを分ける




画面いっぱいにドラック&ドロップ（順番など関係なし）
≻https://q-az.net/elements-drag-and-drop/