사전캠프 14일차

TIL(Today I Learned) - 오늘의 공부

Javascrip 응용하기 도전과제! 과제 04 까지 완료
- Javascript와 css를 이용하여(+부트스트랩) 할 일을 적어 추가하고 체크/삭제 가 되는 사이트를 만들어 보았다.

TIL(Today I Learned) - 학습 과정 중 특이사항

할 일을 적어 [추가] 버튼을 누르면 입력되어있던 값이 초기화 되며 하단에 추가되게 만들었다
(이 과정에서 배운 구문들)

  // todolist 라는 값에 #id값으로 찾은 객체를 선택하여 부여한다는 의미이다. 
  const todolist = document.querySelector("#todo-list");

  // li 라는 값에 새로운 객체 <li> 를 만들어 저장한다는 의미이다.
  const li = document.createElement('li');

[삭제] 버튼을 구현하면서 동적으로 생성한 객체에 이벤트를 부여하는 법을 배웠다.

  // $(document).on 을 이용하면 새로 추가된 객체여도 이를 인식하여 작동할 수 있게된다.
  $(document).on('click', "button[name='delete']" , function(){
      // $(this)를 이용하여 선택된 객체 본인을 이용하였다. 
      $(this).parent().remove();
  });

체크 표시에 추가적인 기능을 넣기위해 객체의 형제간 이동하는 법을 알게 되었다.

  $(document).on('click', "input[name='ckbox']" , function(){
      // 체크 표시의 여부에 따라 다르게 적용하기
      if($(this).is(':checked')) {
          // prev()를 2번 이용하여 형제간 이동을 하였다. 
          // 추가로 .css 를 사용하여 css 스타일을 동적으로 변경하는 법을 알게 되었다.
          $(this).prev().prev().css("text-decoration", "line-through");
      }
      else {
          $(this).prev().prev().css("text-decoration", "none");
      }
  });

bootstrap과 기본 css 스타일들을 이용하여 간략하게 꾸미는 방법도 알아보게 되었다.

과제제출

4.할 일 목록(To Do List) 만들기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>할 일 목록</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        body {
            background-color: rgb(204, 204, 204);
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypostingbox {
            background-color: white;
            width: 350px;
            height: auto;

            border: 1px solid white;
            border-radius: 8px;
            padding: 5px;

            text-align: center;
            display: flex;
            flex-direction: column;
        }

        ul {
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }
    </style>

</head>

<body>
    <div class="mypostingbox">
        <div class="mb-2 bg-body-tertiary rounded-3">
            <div class="container-fluid py-3 border-bottom border-info mb-2">
                <h2 id="point" class="fw-bold mb-3">To Do List</h2>
                <div class="input-group row d-flex justify-content-end">
                    <div class="col-auto">
                        <input id="ip_text" type="text" class=" form-control rounded-1" placeholder="할 일을 입력하세요"
                            aria-label="할 일을 입력하세요" aria-describedby="button-addon2">
                    </div>
                    <div class="col-auto">
                        <button id="btn1" class="btn btn-outline-primary rounded-1" type="button">추가</button>
                    </div>
                </div>

            </div>
            <ul id="todo-list" class="p-3">
            </ul>
        </div>

        <script>
            const todolist = document.querySelector("#todo-list");
            const btn_add = document.querySelector("#btn1");

            $(document).on('click', "button[name='delete']", function () {
                $(this).parent().remove();
            });

            $(document).on('click', "input[name='ckbox']", function () {
                if ($(this).is(':checked')) {
                    $(this).prev().prev().css("text-decoration", "line-through");
                }
                else {
                    $(this).prev().prev().css("text-decoration", "none");
                }
            });

            btn_add.addEventListener("click", () => {

                let text = $('#ip_text').val();

                if (text.length > 0) {
                    const li = document.createElement('li');
                    const span = document.createElement('span');
                    const ck_box = document.createElement('input');
                    const btn_del = document.createElement('button');

                    li.style.borderBottom = "1px solid gray"
                    li.style.padding = "5px";
                    li.style.height = "auto";
                    li.style.textAlign = "left";
                    li.style.height = "40px";
                    li.style.overflow = "auto";

                    span.textContent = text;
                    span.style.width = "50%";

                    ck_box.type = "checkbox";
                    ck_box.style.float = "right";
                    ck_box.name = "ckbox";
                    ck_box.style.height = "30px";
                    ck_box.style.width = "20px";
                    ck_box.style.marginRight = "10px";

                    btn_del.type = "button";
                    btn_del.name = "delete";
                    btn_del.style.float = "right";
                    btn_del.className = "btn btn-danger btn-sm";
                    btn_del.textContent = "삭제";

                    li.append(span);
                    li.append(btn_del);
                    li.append(ck_box);
                    todolist.append(li);

                }
                
                document.querySelector('#ip_text').value = '';
            });

        </script>


</body>

</html>