JavaScript Study 03

Week3 Mission

3주차 미션 🤍

TO DO LIST 완성시키기 ❕❕

✔ TO DO LIST 구현 조건

todo 생성시 생성 시간 표시
엔터를 누르면 생성
input 이 빈 값이면 엔터를 쳐도 생성이 안 되도록
삭제 버튼 누르면 해당 todo 삭제
스크롤바 항상 아래 고정

사실 저번주에 구현한 TO DO LIST는 조건을 다 만족시키지 못한 미완성 TO DO LIST였다😢
그!래!서! 이번주에는 조건을 다 만족하는 TO DO LIST를 완성하기로 했다.

구현하지 못 했던 기능

todo 생성시 생성 시간 표시

스크롤바 항상 아래 고정

작성 코드 💻

- HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="mission 02.css">
</head>
<body>
    <h1>TO DO LIST</h1>
    <div class="main">
        <form class="" action="mission 02.html" method="post">
            <input type="text" placeholder="할 일을 적어봅시다!" name="todo">
            <button type="submit"><b>ADD</b></button>
        </form> 
        <div class="todolist">
            <ul>
            </ul>
            <a id="delete">DELETE ALL</a>
        </div>
    </div>
    <script type="text/JavaScript" src="mission 02.js"></script>
</body>
</html>

- JS Code

✔ TODO 생성 시 생성 시간 표시하기


//시간 출력
const dgt = (base) => {
    //한 자리수인 경우, 0도 함께 출력
    return (base > 9 ? base : `0${base}`)
};

dgt함수는 시간에서 한 자리수의 경우, 앞에 '0'을 붙여주기 위해 작성한 함수이다.

const addToDoList = (value) => {
    let ul = document.querySelector('ul');
    let li = document.createElement('li');

    //Date 객체 사용
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();

    //checkbox, value, delete 
    li.innerHTML = `<span class="delete">DEL</span><input type="checkbox"><label>${value}
    <span class="time">${dgt(hours)}:${dgt(minutes)}:${dgt(seconds)}</span></label>`;

    ul.appendChild(li);
    document.querySelector('.todolist').style.display = 'block';
};

현재 날짜와 시간을 가져오는 Date()객체를 이용해서 구현하였다.
Date객체는 '생성자 함수'로 사용할 수 있다. const date = new Date();
Date객체를 date변수에 담고, Date객체가 제공하는 시, 분, 초에 대하여 각각 변수를 선언하였다.

📃 도움이 된 자료

✔ 스크롤바 항상 아래에 고정하기

const todoList = document.getElementsByClassName('todolist');

//생성 기능
const addToDo = (e) => {
    e.preventDefault();
    //사용자가 입력하는 todoValue
    let toDoValue = document.querySelector('input');
    if(toDoValue.value !== '') {
        //LIST에 넣어주기
        addToDoList(toDoValue.value);
        //SCROLL 고정
        todoList.scrollTop = todoList.scrollHeight;
        toDoValue.value = ''; 
    }
};

todoList라는 변수를 선언하였고 이는 todolist의 list메인을 의미한다. 이 리스트의 스크롤을 고정해주기 위해 todoList.scrollTop = todoList.scrollHeight; 를 작성해주었다.

추가로 찾아본 내용

생성자 함수

❔생성자 함수❔

객체 생성 방식 중 하나로 객체를 생성할 때 사용하는 함수이다.

const 생성자 = new 생성자명();

innerHTML과 innerText의 차이

.innerText : 요소안의 text 값들만을 가져온다.
.innerHTML : innerText와는 달리 요소안의 HTML이나 XML을 가져온다.

실행 화면

트러블슈팅

TODO 생성 시 생성 시간 표시하기 구현할 때에 발생

시간을 화면에 표시까지 했지만, 사용자가 할 일을 다 했다고 완료버튼을 눌렀을 때나 삭제를 했을 경우 LIST만 삭제되고 시간은 삭제가 안되었다.

const addToDoList = (value) => {
    let ul = document.querySelector('ul');
    let li = document.createElement('li');

    //Date 객체 사용
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();

LIST를 생성하는 함수 안에 시간을 구현해주었다.
그리고 시간을 LIST를 감싸고 있는 ul안에 넣어줌으로써 사용자가 완료를 눌렀거나 삭제를 했을 때, 시간도 함께 사라지도록 구현 완료하였다!

시간은 Date()객체를 이용하여 잘 나타냈지만,
아직 문법이 서툴러서 이를 화면에 표시하는 과정에서 좀 헤맸다.

    //checkbox, value, delete 
    li.innerHTML = `<span class="delete">DEL</span><input type="checkbox"><label>${value}
    <span class="time">${dgt(hours)}:${dgt(minutes)}:${dgt(seconds)}</span></label>`;

    ul.appendChild(li);
    document.querySelector('.todolist').style.display = 'block';
};

이렇게 innerHTML을 이용하여 사용자가 입력한 TO DO LIST 옆에 시, 분, 초를 넣어주었다. 따라서 화면에 LIST와 시간이 잘 표시되도록 하였다.

느낀점

사실 처음에 TO DO LIST를 구현해야 할 때, 어떻게 구현을 해야할지 막막했다.😭
그래서 많이 찾아보고 문법 공부도 계속 한 것 같다!!
프로젝트를 완성을 하니, 이제서야 좀 JS문법이 자리잡힌 것 같다.
(역시 프로젝트를 계속 해봐야 실력이 느는..^_^)
인프런, 노마드코더 사이트에 좋은 강의 많던데 하나씩 따라해보면서 더 많은 프로젝트를 해봐야겠다 !!!✊✊

Author And Source

이 문제에 관하여(JavaScript Study 03), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yyeonhee/JavaScript-Study-03-2uc6zp2d

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)