🥸 To Do List 만들기

기본 로직 

할 일을 입력하고 + 버튼을 누르면 화면에 출력됨. 

let userInput = document.getElementById("user-input")
let addBtn = document.getElementById("add-button")


// 할 일들을 저장할 변수 
let myList = [];

// 버튼을 누르면 할일이 추가되도록 이벤트 리스너 
addBtn.addEventListener("click", addTask)

// 할 일이 추가되는 함수 
function addTask(){
    myList.push(userInput.value) 
//    console.log(myList) -- 확인용

    render(); // + 버튼을 누르면 화면에 출력되게 하는 함수 호출
}


let taskBoard = document.getElementById("task-board")

// 화면에 출력되게 할 함수 
function render(){

    let resultHTML = ''

    for(let i = 0; i < myList.length; i++){
        resultHTML +=
        `<div class="task">
            <span><i class="fa-regular fa-square"></i></span>
            <span>${myList[i]}</span>
            <span><i class="fa-regular fa-trash-can"></i></span>
        </div>`
    }   
    
    document.getElementById("task-board").innerHTML = resultHTML
}

 

 

 

추가적 기능 1

1. 체크를 누르면 효과 완료되었다는 표시 + 되돌리기 누르면 원래대로 돌아옴 

2. 삭제 버튼 활성화 

let userInput = document.getElementById("user-input")
let addBtn = document.getElementById("add-button")


let myList = [];

addBtn.addEventListener("click", addTask)

function addTask(){

    let task = {
        id : randomId(), // 완료, 삭제를 할 때 해당 task만 확인하기 위하여 
        taskContent  : userInput.value, // input에 입력한 값
        isComplete : false // 완료 여부
    }

    myList.push(task)

    userInput.value = ""; // 할 일을 입력하고 추가하면 input창 비워짐

    render();
}

// 랜덤 ID 만드는 함수 
function randomId() {
    return Math.random().toString(36).substring(2, 9);
}


let taskBoard = document.getElementById("task-board")

function render(){

    let resultHTML = ''

    for(let i = 0; i < myList.length; i++){

        if(myList[i].isComplete == true) { // isComplete가 true = 완료됨 

            resultHTML +=
            `<div class="task">
                <button onclick="checkButton('${myList[i].id}')" class="buttons"><i class="fa-regular fa-square-check"></i> </button>
                <span class="doneStyle">${myList[i].taskContent}</span>
                <button onclick="deleteButton('${myList[i].id}')" class="buttons")"><i class="fa-regular fa-trash-can"></i></button>
            </div>`

            // 체크, 삭제버튼을 누르면 이벤트가 발생하는 것을 여기서 inline 형식으로 지정
            // 이벤트: 함수 실행(매개변수id) id값을 확인하여 함수를 실행 
      
        } else {

            resultHTML +=
            `<div class="task">
                <button onclick="checkButton('${myList[i].id}')" class="buttons"><i class="fa-regular fa-square"></i></button>
                <span>${myList[i].taskContent}</span>
                <button onclick="deleteButton('${myList[i].id}')" class="buttons"><i class="fa-regular fa-trash-can"></i></button>
            </div>`

        }     
    }   
    document.getElementById("task-board").innerHTML = resultHTML
}


// 체크버튼을 누르면 isComplete가 true로 바뀜 
function checkButton(id) {
    for(let i = 0; i < myList.length; i++){
        if(myList[i].id == id) {
            myList[i].isComplete = !myList[i].isComplete;
            break;
        }
    }
    console.log(myList)

    render(); // 변경되었으니 화면 출력 함수 호출
}

// 삭제버튼을 누르면 삭제 -> myList에서 해당 아이디의 인덱스 삭제 
function deleteButton(id) {
    for(let i = 0; i < myList.length; i++){
        if(myList[i].id == id) {
            myList.splice(i,1)
            break;
        }
    }

    render(); // 변경되었으니 화면 출력 함수 호출
}

 

 

 

추가적 기능3

탭을 누르면 해당 상태의 리스트가 출력 

let userInput = document.getElementById("user-input")
let addBtn = document.getElementById("add-button")

let myList = [];

addBtn.addEventListener("click", addTask)

// tab을 눌렀을 때 정보 가져오기 
let tabs = document.querySelectorAll(".task-tabs div") 
for(let i = 1; i < tabs.length; i++) {
    tabs[i].addEventListener("click", function(event){filter(event)})
    // tab을 클릭했을 때 이벤트 발생하는 함수(function(event)) -> filter(event)를 호출하는 것 
}


function addTask(){

    let task = {
        id : randomId(), 
        taskContent  : userInput.value, 
        isComplete : false 
    }

    myList.push(task)

    userInput.value = ""; 

    render();
}

function randomId() {
    return Math.random().toString(36).substring(2, 9);
}


let taskBoard = document.getElementById("task-board")

function render(){

    // 필터링한 리스트로 화면에 출력 
    let list = [];
    if(mode == "all") {
        list = myList; // 만약, mode가 all이라면 화면에 출력할 리스트는 원본의 리스트 
    } else if(mode == "not-done" || mode == "done"){
        list = filterList // 만약, mode가 not-done or done이라면 출력할 리스트는 필터링한 리스트 
    }
    

    let resultHTML = ''

    for(let i = 0; i < list.length; i++){

        if(list[i].isComplete == true) {

            resultHTML +=
            `<div class="task">
                <button onclick="checkButton('${list[i].id}')" class="buttons"><i class="fa-regular fa-square-check"></i> </button>
                <span class="doneStyle">${list[i].taskContent}</span>
                <button onclick="deleteButton('${list[i].id}')" class="buttons")"><i class="fa-regular fa-trash-can"></i></button>
            </div>`

        } else {

            resultHTML +=
            `<div class="task">
                <button onclick="checkButton('${list[i].id}')" class="buttons"><i class="fa-regular fa-square"></i></button>
                <span>${list[i].taskContent}</span>
                <button onclick="deleteButton('${list[i].id}')" class="buttons"><i class="fa-regular fa-trash-can"></i></button>
            </div>`

        }     
    }   
    document.getElementById("task-board").innerHTML = resultHTML
}

function checkButton(id) {
    for(let i = 0; i < myList.length; i++){
        if(myList[i].id == id) {
            myList[i].isComplete = !myList[i].isComplete;
            break;
        }
    }
    console.log(myList)

    render(); 
}

function deleteButton(id) {
    for(let i = 0; i < myList.length; i++){
        if(myList[i].id == id) {
            myList.splice(i,1)
            break;
        }
    }
    render(); 
}


// 필터링 해주는 함수 
let mode = 'all'; // 어느 tab을 누른 것인지 정보 저장할 변수(초기값은 all로 해야 입력했을 때 보임)
let filterList = []; // 필터링한 정보를 담을 배열
function filter(event){

    mode = event.target.id // event가 발생한 위치의 id값 저장 

    filterList = []; // tab을 누를때마다 초기화-> 안하면 누적됨

    //1. mode(id)가 all일 때 -> 그냥 화면 출력 
    if(mode == "all") {
        render()

    //2. mode가 not-done or done일 때 filterList에 담음
    } else if(mode == "not-done") {
        for(let i = 0; i < myList.length; i++) {
            if(myList[i].isComplete == false) {
                filterList.push(myList[i])
            }
        }
    } else if(mode == "done") {
        for(let i = 0; i < myList.length; i++) {
            if(myList[i].isComplete == true) {
                filterList.push(myList[i])
            }

        }
    }
    render()
    console.log(filterList)
}

 

기능 보완하기 

1. 엔터키를 눌렀을 때  추가하기 

   -> window.event.key 사용 

   * 문제점 onkeyup을 사용하면 한글 입력 시 두 개가 입력 된다. -> onkeypress 사용

 

2. not-done, done 탭에서도 삭제 가능하게 하기 

 * 문제점

    해당 탭에서 삭제를 누르면 화면에 출력은 되지 않음 그러나 all 탭에 가면 삭제되어 있음

        -> 리스트에서는 삭제가 되었는데 출력이 바로 안됨. 

  * 해결 

    체크, 삭제 버튼을 눌렀을 때도 filter()를 거쳐야 한다. 

 

 

최종본

 

깃허브 

https://github.com/davin1221/ToDoList

GitHub - davin1221/ToDoList

 

 

사이트

https://dvtodolist2.netlify.app/