24.06.18 할 일 목록 만들기

2차 공부/TIL

24.06.18 할 일 목록 만들기

공대탈출 2024. 6. 18. 17:36

input에 할 일을 입력하고 추가 버튼을 누르면 아래 목록에 추가된다.

각 목록에는 완료버튼, 삭제버튼이 존재하며 완료버튼을 누르면 해당 부분의 텍스트가 취소선 처리되고, 삭제를 누르면 해당 항목지 없어지는 페이지다.

먼저 틀을 만들었다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>할 일 목록 만들기</title>
        <style>
            body {
                background-color: rgb(238, 238, 238);
            }
            .wrap {
                background-color: white;
                width: 250px;
                padding: 30px;
                margin: 300px auto;
                box-shadow: 5px 5px 5px 5px gray;
            }
            .wrap > h2 {
                text-align: center;
            }
            .wrap > p {
                border-bottom: 1px solid lightgray;
                padding: 5px;
                font-weight: bold;
            }
            .addWrap {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 20px;
            }
            .addWrap > input {
                width: 170px;
                height: 30px;
                padding: 0px 5px;
            }
            .addWrap > button {
                height: 30px;
            }
        </style>
        <script>
            
        </script>
    </head>
    <body>
        <div class="wrap" id="todoList">
            <h2>투두 리스트</h2>
            <div class="addWrap">
                <input type="text" placeholder="할 일을 입력하세요" />
                <button>추가</button>
            </div>
            <p>밥 먹고 가볍게 산책하기</p>
            <p>자바스크립트 책 읽기</p>
        </div>
    </body>
</html>

먼저 완료와 삭제는 추후 구현하는 것으로 하고 추가부터 만들고자 하였다.

어떻게 목록에 붙을것인지, 추가하는 모습은 어떻게 보일것인지에 대한 구현이다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>할 일 목록 만들기</title>
        <style>
            body {
                background-color: rgb(238, 238, 238);
            }
            .wrap {
                background-color: white;
                width: 300px;
                padding: 30px;
                margin: 300px auto;
                box-shadow: 5px 5px 5px 5px gray;
            }
            .wrap > h2 {
                text-align: center;
            }
            .wrap > p {
                border-bottom: 1px solid lightgray;
                padding: 5px;
                font-weight: bold;
                display: flex;
                gap: 10px;
            }
            .deleteBtn {
                background-color: red;
                color: white;
                border: 1px solid black;
                border-radius: 5px;
                font-weight: bold;
            }
            .deleteBtn:hover {
                background-color: rgb(172, 1, 1);
            }
            .addWrap {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 20px;
            }
            .addWrap > input {
                width: 170px;
                height: 30px;
                padding: 0px 5px;
            }
            .addWrap > button {
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="wrap" id="todoList">
            <h2>투두 리스트</h2>
            <div class="addWrap">
                <input type="text" placeholder="할 일을 입력하세요" id="todoInput" />
                <button onclick="addTodoHandler()">추가</button>
            </div>
            <p>
                <span>밥 먹고 가볍게 산책하기</span><button class="deleteBtn">삭제</button>
            </p>
            <p>자바스크립트 책 읽기</p>
        </div>
    </body>
    <script>
        let todoArr = ['밥 먹고 가볍게 산책하기', '자바스크립트 책 읽기'];
        function deleteTodoHandler(id) {
            let targetTodo = document.getElementById(id);
            let parent = targetTodo.parentElement;
            parent.removeChild(targetTodo);
        }
        function addTodoHandler() {
            let todo = document.getElementById('todoInput').value;
            todoArr.push(todo);
            document.getElementById('todoList').innerHTML += `<p id='${todoArr.length}'>
                                <span>${todo}</span>
                                <button class="deleteBtn" onClick='deleteTodoHandler(${todoArr.length})'>삭제</button>
                            </p>`;
        }
    </script>
</html>

addTodoHandler와 deleteTodoHandler의 기능은 비슷하다.

먼저 addTodoHandler는 input태그에 입력된 값을 가져와 기존에 만들어둔 todoArr배열에 넣어주고

원하는 모양의 태그에 id값을 넘기고, 해당 todo를 넣어준다.

deleteTodoHandler는 id값을 인자로 받는다. id값은 todoList에 추가될 때 입력된 todoArr.length값이다.

원하는 타겟Todo를 입력된 id를 통해 잡아주고, parentElement를 잡아내 해당 Child인 targetTodo를 지우는 방식이다.

여기서 배열에서도 삭제를 할까 고민하였지만, 따로 서버가 없는 상황에서 로그를 파악하기 어렵기 때문에 배열에서 제외하지 않는 것으로 선택하였다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>할 일 목록 만들기</title>
        <style>
            body {
                background-color: rgb(238, 238, 238);
            }
            .wrap {
                background-color: white;
                width: 300px;
                padding: 30px;
                margin: 300px auto;
                box-shadow: 5px 5px 5px 5px gray;
            }
            .wrap > h2 {
                text-align: center;
            }
            .wrap > p {
                border-bottom: 1px solid lightgray;
                padding: 5px;
                font-weight: bold;
                display: flex;
                gap: 10px;
            }
            .deleteBtn {
                background-color: red;
                color: white;
                border: 1px solid black;
                border-radius: 5px;
                font-weight: bold;
            }
            .deleteBtn:hover {
                background-color: rgb(172, 1, 1);
            }
            .completeBtn {
                background-color: greenyellow;
                color: black;
                border: 1px solid black;
                border-radius: 5px;
                font-weight: bold;
            }
            .completeBtn:hover {
                background-color: rgb(133, 201, 30);
            }
            .addWrap {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 20px;
            }
            .addWrap > input {
                width: 170px;
                height: 30px;
                padding: 0px 5px;
            }
            .addWrap > button {
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="wrap" id="todoList">
            <h2>투두 리스트</h2>
            <div class="addWrap">
                <input type="text" placeholder="할 일을 입력하세요" id="todoInput" />
                <button onclick="addTodoHandler()">추가</button>
            </div>
            <p>
                <span>밥 먹고 가볍게 산책하기</span>
                <button class="completeBtn">완료</button>
                <button class="deleteBtn">삭제</button>
            </p>
            <p>자바스크립트 책 읽기</p>
        </div>
    </body>
    <script>
        let todoArr = ['밥 먹고 가볍게 산책하기', '자바스크립트 책 읽기'];
        function completeTodoHandler(id) {
            let targetTodo = document.getElementById(id);
            targetTodo.style.textDecoration = 'line-through';
        }
        function deleteTodoHandler(id) {
            let targetTodo = document.getElementById(id);
            let parent = targetTodo.parentElement;
            parent.removeChild(targetTodo);
        }
        function addTodoHandler() {
            let todo = document.getElementById('todoInput').value;
            todoArr.push(todo);
            document.getElementById('todoList').innerHTML += `<p id='${todoArr.length}'>
                                <span>${todo}</span>
                                <button class="completeBtn" onClick='completeTodoHandler(${todoArr.length})'>완료</button>
                                <button class="deleteBtn" onClick='deleteTodoHandler(${todoArr.length})'>삭제</button>
                            </p>`;
        }
    </script>
</html>

다음으로 완료버튼 구현이다.

완료버튼도 삭제버튼과 비슷한 형식을 취한다.

똑같이 생성시 todoArr.length를 id값으로 넘겨주고, 완료관련 함수에서 인자로 id값을 받는다.

그리고 해당 id값으로 타겟을 잡아주고 style의 text-decoration을 line-through로 하여 취소선 형태로 나오도록 하였다.

확실하게 jQuery 라이브러리의 장점을 알게되었다. 직관적으로 사용이 가능하고, 기능의 사용이 간편하다.

다만, html파일 내에서 라이브러리없이 해당 기능을 구현하는 방법은 꼭 알고 있어야 겠다는 생각을 하였다.

또한 완료기능 구현 중 버튼의 글씨까지 취소선 처리되는 문제가 있었는데, 이런 부분도 잘 생각해서 코드를 작성해야한다고 생각했다. 개발단계에서 문제점을 알아차리지 못한다면 사용자에게 불편함을 줄 수 있고, 의도하지않은 버그를 발생시킬 수 있기 때문이다.

저작자표시

'2차 공부 > TIL' 카테고리의 다른 글

24.06.20 리액트로 TodoList 관리 페이지 만들기 (0)	2024.06.20
24.06.19 할 일 목록 만들기 코드 리팩토링 (0)	2024.06.19
24.06.17 한식 메뉴 렌더링하기 (0)	2024.06.17
24.06.12 리액트 css 적용하기 + 컴포넌트 분리하기 + export default (0)	2024.06.12
24.06.11 리액트 시작하기 (1)	2024.06.11

현재글24.06.18 할 일 목록 만들기

어휘적 스코프, react, hoisitng, javascript, initialstate, js, react-redux, store, 프로그래머스, 대충 만든 자판, 옹알이2, 호이스팅, redux, auto batching, 코딩테스트, 한식 메뉴 렌더링, Reducer, window.addeventlistener, batching, TDZ,

Today :
Yesterday :

코딩연습장