자바스크립트를 이용해서 todo list app을 만들어 보았다.

가장 기본적인 appendChild부터 classList 또한 localstorage 까지 이용해서 구현해보았다. 

 

todo-app.zip
0.00MB

 

js

//Selecter
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
 
//Event
document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteTodo);
 
//Functions
function addTodo(e) {
  // 새로고침 방지
  e.preventDefault();
 
  // todo Div 만들기
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");
 
  // todo li 붙여주기
  const newTodo = document.createElement("li");
  newTodo.innerText = todoInput.value;
 
  // 로컬스토리지에 저장
  saveLocalTodos(todoInput.value);
 
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);
  todoInput.value = "";
 
  // 완료버튼 생성
  const completedButton = document.createElement("button");
  completedButton.innerHTML = `<i class="fas fa-check"></i>`;
  completedButton.classList.add("complete-btn");
  todoDiv.appendChild(completedButton);
 
  // 삭제버튼 생성
  const trashButton = document.createElement("button");
  trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);
 
  todoList.appendChild(todoDiv);
}
 
function deleteTodo(e) {
  const item = e.target;
 
  // 삭제버튼일때
  if (item.classList[0] === "trash-btn") {
    const todo = item.parentElement;
    todo.classList.add("fall");
 
    removeLocalTodos(todo);
    todo.addEventListener("transitionend", e => {
      todo.remove();
    });
  }
 
  // 완료버튼일때
  if (item.classList[0] === "complete-btn") {
    const todo = item.parentElement;
    todo.classList.toggle("completed");
    console.log(todo);
  }
}
 
// 로컬스토리지 관려작업
function saveLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  todos.push(todo);
  localStorage.setItem("todos", JSON.stringify(todos));
}
function removeLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  const todoIndex = todo.children[0].innerText;
  todos.splice(todos.indexOf(todoIndex), 1);
  localStorage.setItem("todos", JSON.stringify(todos));
}
 
// 실행시에 로컬스토리지에 데이터가있으면 가져온다.
function getTodos() {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  todos.forEach(function(todo) {
    
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
 
    const newTodo = document.createElement("li");
    newTodo.innerText = todo;
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
    todoInput.value = "";
 
    const completedButton = document.createElement("button");
    completedButton.innerHTML = `<i class="fas fa-check"></i>`;
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);
 
    const trashButton = document.createElement("button");
    trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    //attach final Todo
    todoList.appendChild(todoDiv);
  });
}

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TodoList</title>
    <link
      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
      integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <h1>Todo List</h1>
    </header>
    <form>
      <input type="text" class="todo-input" />
      <button class="todo-button" type="submit">
        <i class="fas fa-plus-square"></i>
      </button>
    </form>
    <div class="todo-container">
      <ul class="todo-list"></ul>
    </div>
    <script src="./app.js"></script>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-image: linear-gradient(120deg, #4356be 0%, #3d59b4 100%);
  color: white;
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
}
header {
  font-size: 2rem;
}
 
header,
form {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: white;
}
form button {
  color: #4356be;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
form button:hover {
  background: #4356be;
  color: white;
}
.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.todo-list {
  min-width: 30%;
  list-style: none;
}
 
.todo {
  margin: 0.5rem;
  background: white;
  font-size: 1.5rem;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all .2s ease;
}
.filter-todo {
  padding: 1rem;
}
.todo li {
  flex: 1;
}
 
.trash-btn,
.complete-btn {
  background: #1f2e85;
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1rem;
}
.complete-btn {
  background: #1f2e85;
}
.todo-item {
  padding: 0rem 0.5rem;
}
 
.fa-trash,
.fa-check {
  pointer-events: none;
}
 
.completed {
  text-decoration: line-through;
  opacity: 0.5;
}
 
.fall { 
  display: none;
}

 

'ETC > Sample' 카테고리의 다른 글

javascript snow (눈내리는 효과)  (0) 2021.04.16
javascript metronome (자바스크립트 메트로놈)  (0) 2021.04.14
javascript vimeo thumbnail (자바스크립트로 비메오 썸네일 가져오기)  (0) 2021.04.12
javascript youtube thumbnail (자바스크립트로 유튜브 썸네일 가져오기)  (0) 2021.04.11
javascript < > 를 &lt; &gt;로 변환  (0) 2021.03.05

다른 글

다른 글 더 둘러보기

티스토리툴바