본문 바로가기
Fiori/UI5

[JavaScript] To Do List 예제

by clode 2023. 3. 7.
728x90
반응형

화면 구성

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="todo.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/button.min.css">
</head>

<body>
  <!-- 왼쪽박스 -->
  <div id="grid">
    <div>
      <div id="myDIV" class="header">
        <h2>My To Do List</h2>
        <input id="tText" type="text" placeholder="Title...">
        <span onclick="addLine();" class="addBtn">Add</span>
      </div>

      <ul id="myUL">
      </ul>

      <div class="button_area">
        <div>
          <button onclick="deleteHref();" class="ui grey button">삭제</button>
          <button onclick="endHref();" class="ui brown button">완료</button>
        </div>
      </div>
    </div>

    <!-- 오른쪽 박스 -->
    <div>
      <div id="myDIV2" class="header2">
        <h2>Complete To Do List</h2>
      </div>

      <ul id="myUL2">
      </ul>
    </div>

CSS 구성

todo.css

* {
  box-sizing: border-box;
}

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#grid > div {
  margin: 30px;
}

.button_area {
  width:100%;
}

.button_area > div {
  margin:20px 30%;
}

.date {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style the header */
.header {
  background-color: #f44336;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

.header2 {
  background-color: #f44336;
  padding: 50px 40px;
  color: white;
  text-align: center;
}

.header.padding70 {
  padding-bottom: 70px;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}

My To Do List 구성

todo.json

{
  "todo":[{
      "title": "운동하기",
      "inputDate": "2020. 6. 1. 오전 10:30:52"
    },
    {
      "title": "공과금 내기",
      "inputDate": "2020. 6. 3. 오후 10:30:12"
    },
    {
      "title": "동건 만나기",
      "inputDate": "2020. 6. 4. 오전 09:40:22"
    },
    {
      "title": "장보기",
      "inputDate": "2020. 6. 4. 오전 11:20:32"
    },
    {
      "title": "독서하기",
      "inputDate": "2020. 6. 5. 오후 04:10:32"
    },
    {
      "title": "커피볶기",
      "inputDate": "2020. 6. 6. 오후 07:31:22"
    }]
}

이 json파일을 참고해 리스트를 구성한다.

  <script>
      $.ajax({
        url: "./../JSON/todo.json",
        type: "get",
        success: function(oResult) {
          if (oResult && 0 < oResult.todo.length) {
            var oTodo = oResult.todo;
            for (var i = 0; i < oTodo.length; i++) {
              $("#myUL").append("<li><span>" + oTodo[i].title + "</span><span class=\"date\">" + oTodo[i].inputDate + "</span></li>")
            }
          }
        }
      });
  </script>

oResult에는 json파일의 데이터가 들어가 있다. 모든 데이터중에서 todo 객체만 oTodo 변수에 담는다. 그럼 todo의 데이터들이 배열로 변수에 담아졌고, 그 배열의 인덱스로 접근해 todo List의 UL 리스트에 뿌려준다.

todo List를 구성하는 UL에 ID myUL을 부여해서 ID에 데이터를 넣는다.

Complete List 구성

complete.json

{
  "complete":[{
      "title": "공부하기",
      "inputDate": "2020. 6. 2. 오전 11:30:52"
    },
    {
      "title": "한전에 전화하기",
      "inputDate": "2020. 6. 4. 오후 05:30:12"
    }]
}

<script>
      $.ajax({
        url: "./../JSON/complete.json",
        type: "get",
        success: function(oResult) {
          if (oResult && 0 < oResult.complete.length) {
            var oComplete = oResult.complete;
            for (var i = 0; i < oComplete.length; i++) {
              $("#myUL2").append("<li><span>" + oComplete[i].title + "</span><span class=\"date\">" + oComplete[i].inputDate + "</span></li>")
            }
          }
        }
      });
</script>

List에 내용추가

입력필드에 추가할 할일을 입력하고 add버튼을 클릭하면 list에 입력한 내용이 추가되고 추가한 시간도 나오게 한다. 

<script>
      function addLine() {
        var iLine = $("#tText").val();
        var oToday = new Date().toLocaleString();
        $("#myUL").append("<li><span>" + iLine + "</span><span class='date'>" + oToday + "</span></li>");
        iLine++;
      };
</script>

입력필드에 tText라는 ID를 주고 입력필드에 입력된 값을 변수 iLine에 담는다. oToday 변수에 toLocalString을 사용해 날짜를 담는데, 초단위까지 나오게 한다. 이후 이 변수들은 todo List의 list에 추가되야 하므로 todo List의 UL인 myUL에 값을 추가해준다.


현재 list 구성하는 코드와, list 추가하는 코드를 보면 중복되는 코드가 많다. 그러므로 코드 Refactoring을 진행한다.

Code Refactoring

<script>
      $.ajax({
        url: "./../JSON/todo.json",
        type: "get",
        success: function(oResult) {
          if (oResult && 0 < oResult.todo.length) {
            newLine(oResult.todo, "#myUL") //(배열, "위치")
          }
        }
      });

      $.ajax({
        url: "./../JSON/complete.json",
        type: "get",
        success: function(oResult) {
          if (oResult && 0 < oResult.complete.length) {
            newLine(oResult.complete, "#myUL2")
          }
        }
      });

      function addLine() {
        var iLine = $("#tText").val();
        var oToday = new Date().toLocaleString();
        var addList = [{
          "title": iLine,
          "inputDate": oToday
        }]
        newLine(addList, "#myUL")
      };

      function newLine(arr, name) {
        for (i = 0; i < arr.length; i++) {
          $(name).append("<li><span>" + arr[i].title + "</span><span class='date'>" + arr[i].inputDate + "</span></li>");
        }
      }
</script>

항목 체크시 항목 체크표시

    <script>
      var aLiList = document.querySelector('ul');
      aLiList.addEventListener('click', function(ev) {
        if (ev.target.tagName === 'LI') {
          ev.target.classList.toggle('checked');
        }
      })
    </script>

이때 이 이벤트 구문은 ul 리스트를 구성하는 구문 이전에 넣어야한다.


삭제 버튼 클릭시 삭제

  <script>
      function deleteHref() {
        if (!confirm("삭제하시겠습니까?")) {  //확인누르면 true반환, 취소누르면 false반환
          return; //취소
        }
        var oUlcheck = document.querySelector("#myUL"); //왼쪽칸의 li만 가져옴
        var oChecked = oUlcheck.querySelectorAll('.checked');
        for (i = 0; i < oChecked.length; i++) {
          $(oChecked[i]).remove();
        }
      };
  </script>

LI를 가져오게되면 왼쪽 todo List의 LI, 오른쪽 Complete List의 LI를 전부 가져오게 된다. 부모태그를 가져오면 부모태그가 가지고 있는 자식태그들도 딸려오기 때문에 todo List LI의 부모인 myUL을 가져온다. 그렇게 되면 자식인 LI만 가져온다.

완료 버튼 클릭시 Complete List로 이동

  <script>
      function endHref() {
        if( !confirm("완료하시겠습니까?")){
          return;
        }
        var oUlcheck = document.querySelector("#myUL");
        var oChecked = oUlcheck.querySelectorAll('.checked');
        for (i = 0; i < oChecked.length; i++) {
          oChecked[i].classList.toggle('checked');
          $("#myUL2").append(oChecked[i]);
        }
      };
  </script>

삭제버튼과 동일한데 위치만 Complete List인 myUL2로 변경하고, set자리에 세팅할 항목을 입력한다.

728x90
반응형

'Fiori > UI5' 카테고리의 다른 글

[UI5] Binding (Two-way& One-way)  (0) 2023.03.07
[UI5] UI5 구성  (0) 2023.03.07
[JavaScript] 회원정보 예제  (1) 2023.03.07
[JavaScript] jQuery  (0) 2023.03.07
[JavaScript] JSON  (0) 2023.03.07

관련글

댓글

티스토리툴바