Javascript Toy Project 1 - TO DO LIST | 투두리스트 만들기

summer_joy·2022년 7월 22일

토이프로젝트

목록 보기

2/3

1. TO DO LIST UI/UX

반응형 투두리스트 메모장 웹/앱의 기능을 구현해보았습니다.
아이폰 기본 메모 앱에서 시작된 디자인 구상이 뉴모피즘까지 오게 되어 처음으로 CSS에 뉴모피즘(Neumorphism)테마를 적용해보았습니다.
배경색이 다크 테마임을 고려하여 폰트나 포인트 컬러를 밝게 설정하였고 미니멀한 메모 앱의 편리함을 추구하고자 되도록 깔끔하게 디자인하였습니다.
(코드펜의 오픈소스인 스타일을 그대로 구현하지 않고 버튼에 아이콘 추가 및 포인트 컬러 변경 등 스타일 수정을 거쳤습니다.)

(이후에 다크테마/화이트테마 화면 전환이 가능하도록 기능을 추가할 예정입니다.)

.container {
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 140px auto 0;
    background: #091921;
    box-shadow: 0 -15px 15px rgb(255 255 255 / 5%),
                inset 0 -10px 10px rgb(255 255 255 / 10%),
                0 15px 15px rgb(0 0 0 / 30%),
                inset 0 15px 15px rgb(0 0 0 / 30%);
    padding: 40px 40px 70px;
    border-radius: 20px;   
}

2. Main Features

2-1. Responsive web

화면 해상도에 따른 반응형 웹이지만 flexbox의 구성이 아닌, 화면의 크기가 조정되면 크기를 축소시켜 미니멀한 메모 앱의 특성을 살렸습니다.

2-2. Add a new Todo

ADD ITEM 인풋에 새로운 메모를 입력하면 하단 TODO(할일목록)리스트에 추가됩니다.

var taskInput = document.getElementById("new-task"); // new-task

//Add a new task
var addTask = function() {
  console.log("Add Task...");
  //Create a new list item with the text from the #new-task:
  var listItem = createNewTaskElement(taskInput.value);
  //Append listItem to incompleteTaskHolder
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
  taskInput.value = "";
}

2-3. Edit/Delete

이미 생성된 요소를 수정하거나 삭제할 수 있습니다.

//Edit an existing task
var editTask = function() {
    console.log("Edit Task...");
  
var listItem = this.parentNode;
  
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
  
var containsClass = listItem.classList.contains("editMode");
  
  
  // if class of the parent is .editMode
  if (containsClass) {
      //Switch from .editMode
      //label text become the input's value
      label.innerText = editInput.value;
  } else {
      //Switch to .editMode
      //input value becomes the labels text
     	editInput.value = label.innerText;
  }
  //Toggle .editMode on the parent 
  listItem.classList.toggle("editMode");
}

//Delete an existing task
var deleteTask = function () {
    console.log("Delete Task...");
		//Remove the parent list item from the ul
  	var listItem = this.parentNode;
  	var ul = listItem.parentNode;
  
  	ul.removeChild(listItem);
}

2-4. Completed Todo

생성된 메모의 체크박스를 클릭하면 완료 목록으로 추가됩니다.

//Mark a task as complete
var taskCompleted = function() {
   console.log("Task Complete...");
  //When the Checkbox is checked 
  //Append the task list item to the #completed-tasks ul
   var listItem = this.parentNode;
   completedTasksHolder.appendChild(listItem);
   bindTaskEvents(listItem, taskIncomplete);
}