📝 오늘 한 것

1. 모멘텀 구현 완료

📚 배운 것

어제 공부에 이어서

1. todo.js

• setAttribute() 사용 시 속성 이름에 ''를 꼭 붙여줘야 한다..

'use strict';

const todoForm = document.querySelector('#todoForm');
const todoInput = todoForm.querySelector('input');
const todoList = document.querySelector('#todos');

const TODO_KEY = 'todos'

let todos = [];

function deleteTodo(event) {
  const todoToDelete = event.target.parentNode;
  todoToDelete.remove();
  todos = todos.filter(todo => todo.id !== parseInt(todoToDelete.id));
  saveTodo();
}

function ShowTodo(todo) {
  const li = document.createElement('li');
  li.id = todo.id;
  const text = document.createElement('span');
  text.innerText = todo.text;
  const delBtn = document.createElement('button');
  delBtn.innerText = '❌';
  delBtn.addEventListener('click', deleteTodo);
  li.appendChild(text);
  li.appendChild(delBtn);
  todoList.appendChild(li);
}

function saveTodo() {
  localStorage.setItem(TODO_KEY, JSON.stringify(todos));
}

function ontodoFormSubmit(event) {
  event.preventDefault();
  const newTodo = {};
  newTodo.id = Date.now();
  newTodo.text = todoInput.value;
  todos.push(newTodo);
  ShowTodo(newTodo);
  saveTodo();
  todoInput.value = '';
}

todoForm.addEventListener('submit', ontodoFormSubmit);

const localStorageTodo = localStorage.getItem(TODO_KEY);

if (localStorageTodo) {
  const localTodoArray = JSON.parse(localStorageTodo);
  localTodoArray.forEach(localTodo => ShowTodo(localTodo));
}

✨ 내일 할 것

1. 복습 및 정리