1. To do list - 날짜 다루기, 일정 추가하기

목차

1. To do list - 날짜 다루기, 일정 추가하기
2. To do list - 클릭 이벤트, 일정 삭제, 일정 수정하기

 

 

쉽게 봤다가는 생고생하기 쉽다. 첫 프로젝트에서 배운 유익한 결과다.

대부분 자바스크립트 첫 프로젝트는 to do list를 추천한다. 처음으로 추천하는데에는 이유가 있겠지. 뭐 그리 어렵겠어? 하고 가벼운 마음으로 시작한 프로젝트는 하루를 홀랑 날려버렸다.

머릿속에서 구현한 코드와 실제 실행되는 코드는 달랐기에 내가 처음에 대충 이렇게 하면 되겠지~ 싶었으나, 그리 쉽지 않았다. 결국 그대로 하루가 끝나며 겨우 마무리 지었다. 아직 기초가 부족하단 의미이며, 동시에 자잘한 실수가 많았다.

그래도 간단하게 만든다면, 하루면 끝낼 수 있는 프로젝트다. 필자와 같은 자잘한 실수를 하지 않도록, 오늘은 기획 내용 및 날짜와 관련된 간단한 코드를 살펴볼 것이다.

---

어떻게 만들까?

사용자가 to do list에서 무엇을 바랄 것이며, 그에 대해 개발자가 구현해야할 사항에 대해 정리해보았다.

1. 오늘 날짜 표시
2. 입력한 내용을 목록으로 볼 수 있게 하기
3. 미 입력 시 경고문 출력하기
4. 진행한 내용 체크 처리하기
5. 필요없는 내용 지우기
6. 잘못 쓴 내용 수정하기

오늘은 3번까지의 내용을 이야기한다.

to do list의 틀을 잡고, 날짜를 표시해주고, 일정을 새로 추가해준다.

 

 

다음은 최종적으로 완성된 코드다.

See the Pen To to list - 1 by beren-105 (@beren-105) on CodePen.

 

 

1. 날짜 표시하기

---

let day = new Date() // 클래스 선언

let year = day.getFullYear() //년도
let month = day.getMonth()+1 //월
let date = day.getDate() //일
let week = day.getDay() //요일

console.log(year + '년' + month + '월' + date + '일')
console.log(week)

 

• 현재 시간과 날짜를 리턴할 수 있다.

 

유의점

• 월은 0~11로 표시된다. 즉, 1월은 0 / 2월은 1이다. 때문에 해당 월을 그대로 나타내려면 +1을 해줘야한다.
• 요일은 숫자로 표시되며, 0~6의 값을 갖는다. 일요일은 0 / 월요일은 1로 표시된다.

 

- 응용하기

const yearTag = document.querySelector('.year')
const today = document.querySelector('.today')
const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']

let day = new Date()
let year = day.getFullYear()
let month = monthArr[day.getMonth()]
let date = day.getDate()

yearTag.innerHTML = year
today.innerHTML = month + '.' + date

• 문자열 배열을 사용해 달을 영어나, 한국어로 표기할 수 있다.
• 같은 방법을 사용해 숫자로 나오는 요일을 영어로 표기할 수도 있다.

 

 

2.  미 입력 시 경고문 띄우기

---

const formText = document.querySelector('.form-text')
const form = document.querySelector('form')

formText.addEventListener('keyup', (e)=> {
    const warning = document.querySelector('.warning')

    if (e.target.value === '') {
        warning.classList.remove('h-0')
        warning.classList.add('h-20')
    } else {
        warning.classList.remove('h-20')
        warning.classList.add('h-0')
    }
})

• if문을 이용해 간단한 경고문을 만들어 주었다.
• 기본적으로 경고문의 높이를 0으로 가려 보이지 않게 한 뒤, 내용이 비었을 시 높이를 원래대로 복구 시켜 다시 보여주는 역할을 한다.

 

 

3. 일정 추가하기

---

const div = document.createElement('div')

• 일정을 추가할 때 새로운 element를 만드는 코드다. 위 코드를 이용해 아래와 같은 다양한 작업을 할 수 있다.

 

form.addEventListener('submit', (e)=> {
    e.preventDefault()

    const formValue = formText.value

    if (formValue !== '') {

        const ul = document.querySelector('.lists')
        const li = document.createElement('li')
        li.classList.add('list')
        ul.appendChild(li)
    

        // 체크표시, 할 일 내용 만들기
        const listCon = document.createElement('div')
        listCon.classList.add('list-cont')

        const checkBtn = document.createElement('button')
        checkBtn.classList.add('check-btn')
        checkBtn.innerHTML = `
            <svg class="check-icon hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
        `

        const listInput = document.createElement('input')
        listInput.classList.add('list-input')
        listInput.type = 'text'
        listInput.value= formValue
        listInput.setAttribute("readonly", 'readonly')
    
        li.appendChild(listCon)
        listCon.appendChild(checkBtn)
        listCon.appendChild(listInput)
    

        // 수정버튼, 삭제버튼 만들기
        const listBtn = document.createElement('div')
        listBtn.classList.add('list-btn')
        li.appendChild(listBtn)

        const editBtn = document.createElement('button')
        editBtn.classList.add('edit','btn')
        editBtn.innerHTML = `
            <svg class="edit-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M368.4 18.3L312.7 74.1 437.9 199.3l55.7-55.7c21.9-21.9 21.9-57.3 0-79.2L447.6 18.3c-21.9-21.9-57.3-21.9-79.2 0zM288 94.6l-9.2 2.8L134.7 140.6c-19.9 6-35.7 21.2-42.3 41L3.8 445.8c-3.8 11.3-1 23.9 7.3 32.4L164.7 324.7c-3-6.3-4.7-13.3-4.7-20.7c0-26.5 21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48c-7.4 0-14.4-1.7-20.7-4.7L33.7 500.9c8.6 8.3 21.1 11.2 32.4 7.3l264.3-88.6c19.7-6.6 35-22.4 41-42.3l43.2-144.1 2.8-9.2L288 94.6z"/></svg>
        `
        editBtn.children[0].style.fill = `var(--color-blue)`
        listBtn.appendChild(editBtn)

        const deleteBtn = document.createElement('button')
        deleteBtn.classList.add('delete','btn')
        deleteBtn.innerHTML = `
            <svg class="delete-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
        `
        listBtn.appendChild(deleteBtn)
    }

    formText.value =''
    
})

코드가 길어 복잡해 보이지만, 아래 세가지의 반복이다.

1. createElement로 새로운 태그 만들기
2. lassList.add() 등을 통해 요소 추가하기
3. .appendChild()으로 태그 넣어주기

 

editBtn.children[0].style.fill = `var(--color-blue)`

• 수정 버튼의 경우 사용자가 클릭 시 색상이 바뀌며 수정이 가능해지기 때문에 자바스크립트 내에서 색상을 지정해주었다.

 

e.preventDefault()의 역할은?

• form은 본래 서버에 데이터를 넘기거나, 혹은 가져오는 역할을 한다.
• 그러나 현재는 서버에서 직접 데이터를 가져올 것이 아니므로, e.preventDefault()를 이용하여 form이 제출되지 못하도록 막는다.

 

.appendChild()

const ul = document.querySelector('ul')
let li = document.createElement('li') // li 생성 
li.innerHTML = 'baz' // text content 생성

ul.appendChild(li) // 주입
console.log(li) // li

• 특정 위치에 element를 주입하는 코드
• 위 예시에서는 li 태그를 새로 만들어 ul 안에 주입 시켰다.

 

다음 글에서는 만들어진 일정을 클릭하면 체크 표시가 생기고, 삭제하는 기능을 만들 것이다.

내용을 수정하는 방법에 대해서도 이야기한다.