Toy Project 03 Todolist 만들기

dory·2021년 3월 31일

Toyproject js todoList 토이프로젝트

토이프로젝트

목록 보기

3/8

곰돌이의 자취를 느낄 수 있는 todo list!

리스트를 추가할때마다 곰돌이가 발자국을 남기며 내려가는 투두리스트를 만들어보았다!

사실 원래 목표는 여러 리스트 박스를 추가할 수 있는 페이지를 만드는 것이었다.

하지만.. ㅠㅠ

새로 생성된 리스트가 기능을 하지 못했고.. 어떻게 구현해야할지 해결책을 찾지 못했다..

결국 새로 생성하기보다는 하나의 리스트에 만족하기로 하며 페이지를 마무리해보았다
-> 이것도 미래의 내가 구현해주겠지 ㅎ_ㅎ

TO DO LIST

1. 제목을 입력하여 리스트 생성

//set the title of list
const addform = document.querySelector('.title-form');
addform.addEventListener('submit', function(e) {
    e.preventDefault();
    const title = addform.elements.title.value;
    const todoBox = document.querySelector('.todo-box'); 
    const todoCont = document.querySelector('.todo-cont');
    const colorBtn = document.querySelector('.col');
    addtitle(title);
    todoBox.classList.remove('init');
    todoCont.classList.remove('init');
    colorBtn.classList.remove('init');
    addform.elements.title.value = ''
})

const addtitle = (title) => {
    const titleInList = document.querySelector('p.goal');
    const newTitle = document.createElement('span');
    newTitle.append(title);
    titleInList.innerText = newTitle.innerText;
}

제목 생성하여 리스트 타이틀로 대체

addtitle이라는 함수로, input값을 span안에 담아서 list안의 title의 텍스트로 교체해주었다.
-> input값을 바로 선택해서 집어넣고싶었는데,입력도 하기전에 선택을 해서인지 제대로 작동하기 않았다. 그래서 span을 새로 만들고 그 안의 값을 대체해주는 방식을 택했다. 그 과정 중에 선택을 잘못해서, text 그 자체가 출력되기보단 HTMLelementspantag? 뭐 이런식으로 계속 나타나서 고생을 했다.
-> 예전 버전에서는 생성된 리스트 값을 배열 안에 집어넣고, 첫 번째 인덱스 값을 제목으로 불러오려 했었다.
-> 그때 리스트 첫 줄과 제목이 동일하게 남아있는 모습이 싫어서 span안에 담아서 바꾸려고 했었던 것 같다.(어제의 기억도 잘 나지 않는거 보니 꼭꼭 만들고 바로 기록해야겠다..!)

대체와 동시에 리스트 보여주기

값을 입력하면 display:none을 가진 init이란 class를 제거하여, 리스트가 새로 만들어 진 것처럼 표현해보았다.
-> 이때 submit후에는 계속 리스트 박스가 보여야하므로 toggle을 쓰지 않았다.
-> 참고로 괄호 안에 입력해야 할 형식을 착각해서 오류가 발생했었는데, 꼭! .을 생략해야한다! classList에서 삭제할 아이를 알려주는 것이니까 그냥 class name만 입력하는 건가보다..?

input 창 안의 입력값 초기화 하기

이미 입력한 값이 계속 남아있어서 새로운 값을 입력하기 번거로웠다.
그래서 form안의 value를 빈 값으로 초기화하는 것으로 마무리 했다.

2. 목록 추가하기

// creating lists
const listform = document.querySelector('.list-form');
listform.addEventListener('submit', function(e) {
     //next page로 가지 않게 멈추기 : stop default behavior
  	 e.preventDefault(); 
	 //입력 값을 todo로 선언
     const todo = listform.elements.todos.value;
     //addlist 실행
     addList(todo);
     //입력값 초기화
     listform.elements.todos.value = '';

});

const addList = (todo) => {
  	//li 안에 입력 값을 넣고, 이미 존재하는 ul에 집어넣기
    const newTodo = document.createElement('li');
    const todoLists = document.querySelector('ul.todo-lists');
    newTodo.append(todo);
    todoLists.appendChild(newTodo);
}

e.preventDefault();

입력 값을 현재 페이지에 담기 위해서는, submit되어 다른 창으로 넘어가는 것을 막아야 한다.

목록 생성 및 입력값 초기화하기

새로 생성된 li에 입력값을 넣고 ul 안으로 넣었다.

append와 appendChild의 차이

3. 완료 표시와 삭제

const addList = (todo) => {
    const newTodo = document.createElement('li');
    const todoLists = document.querySelector('ul.todo-lists');
    newTodo.append(todo);
    todoLists.appendChild(newTodo);
  
	//done and delete
    newTodo.addEventListener('click', ()=>{
        newTodo.classList.toggle('done')
    })
    newTodo.addEventListener('dblclick', ()=>{
        newTodo.classList.toggle('init')
    })

}

toggle을 사용하여 class on/off하기

addlist 함수 안에서 toggle을 사용하여 done(:밑줄 추가)과init(:display none) class를 부여했다.
-> 생성된 리스트에 적용되는 거라 addList 함수 안에 추가했는데, 함수 이름과 달리 완료와 삭제 기능이 들어있다. 이러면 안될 것 같은데 .. 방법을 아직 모르겠다.newTodo는 함수 밖에서 부를 수 없고... 그렇다고 다 넣자니 add and dond and delelte 함수가 되고.. 잘 모르겠다 ㅠ
-> 그리고 더블클릭으로 삭제하다보니, 모바일에서는 계속 화면이 확대되는게 조금 거슬렸다. 버튼을 생성해서 삭제하는 것이 더 좋을 것 같다. 또한 이미 사라진 목록을 불러올 수 없는데 toggle을 사용하는 것은 맞지 않는 것 같다.
-> 원래는 가상선택자를 선택해서 ::before와 ::after를 누르면 완료와 삭제가 되도록 만들고 싶었는데,, 실패했다.

4. 그 외

배경 색상 바꾸기와 현재 날짜 불러오기

//changing the colors
const paper = document.querySelector('.todo-box');
const btnY = document.querySelector('.yellow');
const btnB = document.querySelector('.blue');
const btnG = document.querySelector('.green');

btnY.addEventListener('click',() =>{
    paper.setAttribute("style", "background-color: #ffe268;");
    
}) 
btnB.addEventListener('click',() =>{
    paper.setAttribute("style", "background-color: #a7c5eb;");
}) 
btnG.addEventListener('click',() =>{
    paper.setAttribute("style", "background-color: #99bbad;");
}) 

//date in todos
const todosDate = document.querySelector('p.date');

function getTime () {
    const dayArr = ['SUN','MON','TUE','WED','THU','FRI','SAT']
    let crrDate = new Date();
    let month = crrDate.getMonth() + 1;
    let date = crrDate.getDate();
    let day = dayArr[crrDate.getDay()];

    todosDate.innerText = `${month <10? `0${month}` : month
                        }.${date<10? `0${date}` : date
                        }.${day}`;
}

getTime();

-> 복습하는 느낌으로 색상 변경하는 기능을 추가하고, 자동으로 현재 날짜가 기록되도록 만들어보았다.
-> 이때 .style.backgroundColor로는 설정이 안 먹혔는데 이유를 모르겠다.
-> setAttribute / style / getComputedStyle 차이 찾아보기!

곰돌이 발자국 남기기 (css)

-> 가상 선택자를 처음써보았는데 이미지나 이모티콘을 추가할 수 있다는 것을 알게되었다! (nth-last-child로 발자국을 남기는 것 처럼 표현해보았다.)
-> 추가로! list marker는 포지션을 inside로 지정하지 않으면 영역에 포함되지 않으므로 주의하자!!