티스토리 뷰

Web

[JQuery] To-Do 리스트 만들기

파얌 2019. 8. 4. 13:47
728x90
반응형

 

 

결과물

사용 에디터

Atom Editor

요구사항 

1. Enter를 쳐서 To do list에 Task 추가시키기

2. 체크 버튼 클릭시 Done List에 추가시키고  To do list 에서 없애기

3. 삭제 버튼 클릭시 Task 삭제

4. 입력창 비우기

HTML

<body>
    <div class="container">
      <input type="text" placeholder="Add A Task" class ="txt"> //입력
      
      <div class="notdone"> //to do list
        <h3>To Do List</h3>
        
      </div>
      
      <div class="done"> //done list
        <h3>Done</h3>

      </div>
    </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-image: linear-gradient(180deg, #487eb0, #ffffff);
  min-height: 100vh;
}

.container{
  max-width: 800px;
  margin: auto;
  padding: 20px;
}

.txt{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: none;
  outline: none;
  font-size: 18px;
  margin-top: 5%;
  padding: 0.5%;
}

h3{
  margin: 30px 0;
}
.task{
  width:100%;
  background: rgba(255,255,255,0.5);
  padding: 18px;
  margin: 6px 0;
  overflow: hidden;
  border-radius: 3px;
}
.task i{
  float: right;
  margin-left: 20px;
  cursor: pointer;
}
.done .task{
  background: rgba(0,0,0,0.5);
  color : #fff;
}

SCRIPT

1. Enter를 쳐서 To do list에 Task 추가시키기

- input 창에서 keyup 이벤트가 발생할 경우 넘어오는 key code가 엔터인지 확인한다. 각 키마다 숫자가 지정되어 있는데 enter의 경우 13이다.

- $(".txt").val() != ""를 사용해 input 창에서 공백이 넘어오는걸 방지 시키기 

- To do list div에 append()로 추가하기 

 

2. 체크 버튼 클릭 시 Done List에 추가시키고  To do list 에서 없애기

- 체크 버튼 클릭 시 부모 객체를 fadeOut()을 사용해 서서히 사라지게 한 후 done list에 append() 시켜주고 fadeIn으로 보여주기 

- 더이상 체크 버튼이 필요 없으므로 remove()로 삭제하기

 

3. 삭제 버튼 클릭시 Task 삭제

- 삭제 버튼 클릭 시 부모 객체를 fadeOut()을 사용해 서서히 사라지게 한후 remove()로 삭제시키기 

 

4. 입력창 비우기

- enter를 치면 입력 창의 값을 ""로 바꿔줘 비우기 

<script type="text/javascript">
  $(".txt").on("keyup",function(e){
  
    if(e.keyCode == 13 && $(".txt").val() != ""){
    
      //Task에 입력 값 넣기
      var task = $("<div class='task'></div>").text($(".txt").val());
      
      //삭제버튼
      var del = $("<i class='icon ion-ios-trash'></i>").click(function(){
        var p = $(this).parent();
        p.fadeOut(function(){
          p.remove();
        })
      });
      
      //체크 버튼
      var check = $("<i class='icon ion-md-checkmark'></i>").click(function(){
        var p = $(this).parent();
        p.fadeOut(function(){
          $(".done").append(p);
          p.fadeIn();
        })
        $(this).remove();
      });
      
      //Task에 삭제 & 체크 버튼 추가하기
      task.append(del,check)
	  
      //할일 목록에 추가
      $(".notdone").append(task);
      
      //입력 창 비우기
      $(".txt").val("");
    }
  })
</script>

[JQuery] To-Do 리스트 만들기

 

 

728x90
반응형

'Web' 카테고리의 다른 글

[webtob] ssl인증서 갱신 간단정리  (0) 2021.02.25
vscode(Visual Studio Code)에서 git clone(복제) 하기  (0) 2020.01.06
[JavaScript] 검색 기능 만들기  (8) 2019.08.04
[JavaScript] 네비게이션 바 상단 고정시키기  (0) 2019.08.04
[JQuery] 인트로 텍스트 애니메이션 만들기  (0) 2019.08.04
댓글

"이 블로그의 모든 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday