Zenn
😺

【初心者向け/ITスクール 83日】JS miniproject MomentumApp

に公開
JavaScript
tech

はじめに

今日は、ITスクールに通った83日目の日です。

今日は午前中には、Pythonでコーディングテストを練習し、一つの数の約数を効率的に得る方法と基礎便法の活用（リストのslicingなど）して、10問を解きました。

午後は、JSの基礎活用を練習しながら、TodoListと作成したり、時計を作ったり、ランダムで写真を変更するDOM要素をJSでコントロールする練習をしました。

また、夜は4時間ぐらいSpringBootでCRUDをする方法をクラスメイトに教えました。
いい勉強になる時間でした！

JS

'submit' event + event.preventDefault()


function paintToDo(newTodo) {
  const li = document.createElement('li');
  const text = document.createElement('span');
  text.innerHTML = newTodo;
  const button = document.createElement('button');
  button.innerText = '❌';
  button.addEventListener('click', deleteTodo);
  li.appendChild(text);
  li.appendChild(button);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = '';
  paintToDo(newTodo);
}

toDoForm.addEventListener('submit', handleToDoSubmit)

formを提出する前にrefreshを止めます。

event.currentTarget.parentElement

currentTargetは現在クリくしたところを起点にし、parentElementで直接親要素を探すことができます。これにより、そのbuttonの親のみ得ることができます。

JSobjectをJSONに変換し、localStorageに保存

普段の場合、localStorageには文字列としてしか保存できませんが、
JSON化すれば、配列として保存することができます。

const toDos = [];
.
.
//空いているリストにnewTodoを入れる。
function handleToDoSubmit(event) {
  .
  .
  
  toDos.push(newTodo);
  paintToDo(newTodo);
  saveToDos();
}

//その配列をJSON化してlocalStorageに保存

function saveToDos() {
  localStorage.setItem('todos', JSON.stringify(toDos));
}

JSON.Stringigy()で直列化！

Discussion