목록WebFront_/TodoList (5)
YJ의 새벽
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cuAWV1/btsafO4mXnL/XJQxYc6zzDvtu8KvmC0xOK/img.png)
-- 서버 재실행하면 , 체크박스가 모두 풀린다 . 수정해보자 . --- window.onload 에 체크박스 N / Y 값 확인하는 ajax 추가. $.ajax({ url : "checkcheck", data : { "spanInput1" : span.innerText }, type : "POST", success: function(result){ if ( result == 1 ){ checkBox.checked=true; span.style.textDecoration="line-through"; span.style.color="gray"; count--; updateCount(); } }, error : function(result){ console.log(result); } }); --- 체크가 된..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/coj7wh/btsaeYe40H3/418MJ8Km4Xhc5DKN4dvlm0/img.png)
-- 버튼하나 만들어서 . 체크된것만 삭제 시켜보자 . -- 테이블에 체크를 확인하는 컬럼을 만들어준다 . -- 기본값 N , 체크 됐을때 Y 로 바뀌는 .ajax .js 에 추가 . -- window.onload 함수와. Add 버튼클릭 했을때 중첩되는 부분에 코드를 중복해서 넣어줬다 . checkBox.addEventListener("click",function(){ // check 시 취소선 if ( checkBox.checked ){ span.style.textDecoration="line-through"; span.style.color="gray"; count--; $.ajax({ url : "checkList", data : {"checkList" : span.innerText}, type :..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cyGE9E/btr94xtm7wv/46F8FIeZbkXSSHYoldnbK0/img.png)
-- DB 저장된 목록들이 바로 보이게된다 . -- 즉시실행함수를 만들어보자 . ( window.onload ) -- todojs.js 파일에 함수 추가 . -- Add 버튼 눌렀을때 createElement 한 Element들과 , -- 즉시실행했을때 표시되는 Element들이 똑같다. -- 복붙으로 가져왔지만.. 하나로 쓸수있는법을 찾아보자 . function select(){ $.ajax({ url : "TodoSelectAll", type : "POST", dataType : "JSON", success : function (todoList){ todoListId.innerHTML=""; $(todoList).each(function(){ if ( this!=null){ const li = doc..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/unO47/btr9NBwXk2l/O4b2ARmhTrk4VYBGUItNb0/img.png)
만든 TodoList DB 까지 연동해보자 . -- Add 버튼 눌렀을때 . -- DB 에 추가된거 확인 . -- Delete 버튼 눌렀을때 . -- DB 에서 삭제된거 확인 . -- All Delete 눌렀을때 . -- 전체삭제 확인. --- Add 버튼 눌렀을때 이벤트로 ajax 실행 ( " /addList " ) 로 Servlet 에게 패스 ! -- Add 버튼 눌렀을때 createElement 하기때문에 . -- Add버튼 눌렀을때 --> Delete버튼 눌렀을때 --> ajax 실행 ( "/deleteList" ) 로 Servlet 에게 패스 ! --- todojs.js 코드 addBtn.addEventListener("click",function(e){ // Add 버튼 눌렀을때 . if ( ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/JXAB3/btr9DUoT0n1/EswdNDHTSADob9sLGSsq10/img.png)
---- 할일을 작성후 , Add 버튼을 누르면 ?? --- 체크리스트 check 했을때 . ---- Active 버튼 눌렀을때 !! ( span 태그로 만듬 ) --- Complete 버튼 눌렀을때 !!!! --- ALL 버튼 눌렀을떄 !!! ---- All Delete 눌렀을때 !!! --- HTML 코드 . To_Do List Add 남은 할일 : ALL Active Complete All Delete ---- CSS 코드 body { font-family: sans-serif; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; border-radius: 10px; } h1 { text-..