728x90
반응형
1. ToDo List란?
▷ 할 일을 리스트한 어플리케이션입니다.
◎ 세부 기능
▷ "체크박스 + 할일"을 나열하여 표시하는 기능
▷ 체크하면 취소선을 긋는 기능
▷ "할일"을 추가하는 기능
▷ 취소선이 그어진 항목을 삭제하는 기능
▷ ToDo의 총 건수나 처리완료 건수를 표시하는 기능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>ToDo리스트</h2>
<div id="app">
<div v-for="todo in todos">
<label>
<input type="checkbox" v-model="todo.done">
<span v-bind:class="{donestyle:todo.done}">{{todo.text}}</span>
</label>
</div>
<input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo" placeholder="할일">
<p><button v-on:click="cleanToDo">처리완료삭제</button></p>
<p>{{ remaining }} / {{ todos.length }}건 처리</p>
</div>
<style>
.donestyle{
text-decoration: line-through;
color: lightgray;
}
</style>
<script>
new Vue({
el: '#app',
data:{
addtext:'',
todos:[
{done:false, text:'빵사기'},
{done:false, text:'커피사기'}
]
},
computed:{
remaining: function(){
return this.todos.filter(function(val){ // 필터에서 참 값만 리턴
return val.done; // 참과 거짓의 값을 리턴
}).length; // 참인 값의 개수 계산
}
},
methods: {
addToDo: function(){
if(this.addtext){
// 추가 할 일이 있는지 확인
this.todos.push({done:false, text:this.addtext});
// 추가 할일을 배열 뒤에 추가
this.addtext = '';
// 추가 할 일을 초기화
}
},
cleanToDo: function(){
this.todos = this.todos.filter(function(val){
// 필터에서 거짓 부분만 배열로 저장
return val.done == false;
// 거짓인 부분만 리턴
})
}
}
})
</script>
</body>
</html>아래와 같이 값을 넣고 엔터키를 누르면 값이 추가되고 체크한 것은 버튼을 누르면 삭제됩니다.
◎ 추가 세부기능
▷ 완료일도 같이 입력하여 화면에 나타날 수 있도록 만듭니다.
▷ 완료일 연장을 누르면 기존 입력한 완료일에서 1씩 증가되도록 합니다.
▷ sort를 이용해 할일 또는 완료일 기준으로 오름차순으로 정렬되도록 만듭니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>ToDo리스트</h2>
<div id="app">
<div v-for="(todo,index) in todos">
<label>
<input type="checkbox" v-model="todo.done">
<span v-bind:class="{donestyle:todo.done}">{{todo.text}} ( 완료일 {{ todo.date }} )
<button v-on:click="extendDate(index)" >완료일 연장</button></span>
</label>
</div>
<input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo" placeholder="할일"> /
<input type="text" v-model.trim="adddate" v-on:keyup.enter="addToDo" placeholder="완료일"> (YYYYMMDD 형식으로 입력)
<p>
<button v-on:click="cleanToDo">처리완료삭제</button>
<button v-on:click="sortDate('text')">할일순으로 정렬</button>
<button v-on:click="sortDate('date')">완료일로 정렬</button>
</p>
<p>{{ remaining }}건 중 {{ todos.length }}건 처리, {{ overdate }} 완료일 지남</p>
</div>
<style>
.donestyle{
text-decoration: line-through;
color: lightgray;
}
</style>
<script>
new Vue({
el: '#app',
data:{
addtext:'',
adddate:'',
todos:[
{done:false, text:'빵사기', date:'20191201'},
{done:false, text:'커피사기', date:'20190702'}
]
},
computed:{
remaining: function(){
return this.todos.filter(function(val){
return val.done;
}).length;
},
overdate: function(){
return this.todos.filter(function(val){
var dateNow = new Date();
var year = dateNow.getFullYear();
var month = new String(dateNow.getMonth() + 1);
var day = new String(dateNow.getDate());
if(month.length == 1) month = '0' + day;
if(day.length == 1) day = '0' + day;
var dueDate = year+month+day;
return val.date < dueDate;
}).length;
},
},
methods: {
addToDo: function(){
if(this.addtext){
var dueDate= this.adddate;
if(this.adddate == ""){
var dateNow = new Date();
var year = dateNow.getFullYear();
var month = new String(dateNow.getMonth() + 1);
var day = new String(dateNow.getDate());
if(month.length == 1) month = '0' + day;
if(day.length == 1) day = '0' + day;
dueDate = year+month+day;
}
this.todos.push({done:false, text:this.addtext, date:dueDate});
this.adddate = '';
this.addtext = ''
}
},
cleanToDo: function(){
this.todos = this.todos.filter(function(val){
return val.done == false;
})
},
extendDate: function(index){
var str_date = this.todos[index].date;
var y = str_date.substr(0, 4);
var m = str_date.substr(4, 2);
var d = str_date.substr(6, 2);
var dateNow = new Date(Date.parse(new Date(y, m-1, d)) + 1 * 1000 * 60 * 60 *24);
var year = dateNow.getFullYear();
var month = new String(dateNow.getMonth() + 1);
var day = new String(dateNow.getDate());
if(month.length == 1) month = "0" + month;
if(day.length == 1) day = "0" + day;
var dueDate = year+month+day;
this.todos[index].date = dueDate;
// var ch = this.todos[index];
// ch.date += 1;
// this.todos.splice(index, 1, ch);
},
sortDate: function(type){
if(type == "text"){
this.todos.sort(function(a, b){
return (a.text < b.text ? -1 : 1);
})
} else{
this.todos.sort(function(a, b){
return (a.date < b.date ? -1 : 1);
})
}
}
}
})
</script>
</body>
</html>
모든 기능들을 추가하여 제가 세운 계획들과 완료일 들을 지정할 수 있는 to do list를 만들어 보았습니다.
계속 반복해서 복습해 이 코드는 보지 않고도 작성할 수 있도록 해야겠습니다!!
이제 2022년도 얼마 남지 않았는데 다들 올한해도 고생하셨습니다~
내년에는 모두 복 많이 받으세요~~!!~~~~~~~~!!!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js JSON 데이터 다루기 (2) | 2022.12.29 |
|---|---|
| [java script] Vue.js 컴포넌트 (0) | 2022.12.29 |
| [java script] Vue.js 애니메이션 효과 적용(transition) (0) | 2022.12.28 |
| [java script] Vue.js markdown 에디터 만들기 (0) | 2022.12.28 |
| [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 (0) | 2022.12.28 |
