Todo List 만들기

 

오늘은 todo list를 만들어보았다.

여태까지 배운 내용이 들어간 과제다.

 

 

 

 

 

---

자바스크립트 코드

const todoList = document.getElementById('todo-list')
const todoForm = document.getElementById('todo-form')
let todoArr = [];

// 오늘 날짜 추가
const app = document.querySelector('.app')
const date = document.createElement('div')
let today = new Date();
const year = today.getFullYear();
const month = today.getMonth()+1;
const dt = today.getDate();
date.textContent = `${year}.${month}.${dt}`;

app.append(date);


// 로컬 스토리지
function saveTodos() {
  const todoString = JSON.stringify(todoArr)
  localStorage.setItem("myTodos", todoString)
}

function loadTodos() {
  const myTodos =  localStorage.getItem("myTodos")
  if(myTodos !== null) {
    todoArr = JSON.parse(myTodos)
    displayTodos()
  }
}
loadTodos()

// 할일 삭제하기
function handleTodoDelBtnClick(clickedId) {
  todoArr = todoArr.filter(function(aTodo){
    return aTodo.todoId !== clickedId
  })
  displayTodos()
  saveTodos()
}

// 할일 수정하기
function handleTodoItemClick(clickedId) {
  todoArr = todoArr.map(function(aTodo){
    if(aTodo.todoId === clickedId){
      return {
        ...aTodo, todoDone: !aTodo.todoDone
      }
    } else {
      return aTodo
    }
  })
  displayTodos()
  saveTodos()
}

// 할일 보여주기
function displayTodos() {
  todoList.innerHTML = ""
  todoArr.forEach(function(aTodo){
    const todoItem = document.createElement('li')
    const todoDelBtn = document.createElement('span')
    todoDelBtn.textContent = 'x'
    todoItem.textContent = aTodo.todoText
    todoItem.title = "클릭하면 완료됨"
    if(aTodo.todoDone) {
      todoItem.classList.add("done")
    } else {
      todoItem.classList.add("yet")
    }
    todoDelBtn.title = "클릭하면 삭제됨"

    todoItem.addEventListener("click", function(){
      handleTodoItemClick(aTodo.todoId)
    })
    todoDelBtn.addEventListener("click", function() {
      handleTodoDelBtnClick(aTodo.todoId)
    })

    todoItem.appendChild(todoDelBtn)
    todoList.appendChild(todoItem)
  })
}

// 할일 추가하기
todoForm.addEventListener("submit", function(e){
  e.preventDefault()
  if(todoForm.todo.value.trim() === "") {
    swal('', "할 일을 적어주세요!!", 'warning')
    return    // 반환해야 화면에 리스트 안 생김
  }
  const toBeAdded = {
    todoText: todoForm.todo.value,
    todoId: new Date().getTime(),
    todoDone: false
  }
  todoForm.todo.value = ""
  todoArr.push(toBeAdded)
  displayTodos()
  saveTodos()
})

 

 

 

🐣결과물🐥

 

todo list 영상

 

 

---

강의 영상을 많이 참고해서 만든거라서 디자인만 열심히 꾸미고 자바스크립트 기능 구현은 간단한 것만 조금 더 추가한거라 이번껀 아쉬웠다.

오늘 컨디션이 그다지 좋진 않았어서 머리가 잘 안돌아갔다 ㅠ

그래서!! 내일은 이 과제를 바탕으로 다시 한 번 todo list를 만들어보려고 한다 !_!

하루 만에 다 만들 수 있을지 모르겠지만 할 수 있는 곳까지 최선을 다해서 만들고 블로그에 올려보겠다!