실행 결과
실행 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToDo List</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
h1 {
text-shadow: 3px 3px 2px #ccc;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
padding: 10px;
font-size: 1.1em;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
ul li:hover {
background-color: aliceblue;
}
.borderBox {
border-radius: 10px;
border: 2px solid#ccc;
padding: 10px 30px;
margin-top: 20px;
padding-bottom: 20px;
}
.doneStyle {
text-decoration: line-through;
color: lightgray;
}
#extendBtn {
font-size: 0.8em;
background-color: mediumseagreen;
}
#extendBtn:hover {
background-color: seagreen;
}
.btnBox {
margin-top: 10px;
display: flex;
gap: 20px;
justify-content: space-around;
}
#finish {
color: #007bff;
}
</style>
</head>
<body>
<h1>ToDo List</h1>
<div id="app">
<div class="addBox">
<label>
<input
type="text"
placeholder="추가할 할일 입력"
v-model="todo"
v-on:keyup.enter="addItem"
/>
<input
type="text"
placeholder="D-day_YYYYMMDD형식"
v-model="dateText"
v-on:keyup.enter="addItem"
/>
<button v-on:click="addItem">추가</button>
<p style="float: right">
<span style="color: #007bff">{{remaining}}</span>
/ {{todoList.length}}
<span style="color: #fc5c5c">( 기한 넘김 : {{overDate}} )</span>
</p>
</label>
</div>
<div class="borderBox">
<ul>
<li v-if="todoList.length<=0">
<span id="finish"> 🎉 할일을 모두 완료하였습니다 🎉</span>
</li>
<li v-for="(item,index) in todoList">
<label>
<input type="checkbox" v-model="item.done" />
<span v-bind:class="{doneStyle:item.done}">
{{item.text}} (D-day : {{item.DueDate}})
</span>
<b v-if="item.past" style="color: #fc5c5c"> ⚠️ 기한 넘김</b>
</label>
<button v-on:click="extendItem(index)" id="extendBtn">
하루 연장
</button>
</li>
</ul>
</div>
<div class="btnBox">
<button v-on:click="allClear">체크항목 모두 삭제</button>
<button v-on:click="sortData('todo')">할일 순으로 정렬</button>
<button v-on:click="sortData('date')">완료일로 정렬</button>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
todo: "",
dateText: "",
todoList: [
{ done: false, text: "할일3", DueDate: "20221226", past: false },
{ done: false, text: "할일2", DueDate: "20230702", past: false },
{ done: false, text: "할일1", DueDate: "20230701", past: false },
{ done: false, text: "할일5", DueDate: "20210801", past: false },
{ done: false, text: "할일4", DueDate: "20231021", past: false },
],
},
methods: {
addItem: function () {
if (this.todo) {
if (!this.dateText) {
alert("완료일을 입력하지 않아 내일로 지정합니다.");
var date = new Date(); // date객체 만들기
//date = new Date(Date.parse(date) + 1 * 1000 * 60 * 60 * 24);
var year = date.getFullYear(); // 년도 (YYYY형식으로 받아옴)
var month = new String(date.getMonth() + 1); // 월 (문자열로 변경)
var date = new String(date.getDate() + 1); // 날짜 (문자열로 변경)
if (month.length == 1) month = "0" + month; //MM형식
if (date.length == 1) date = "0" + date; //DD형식
this.dateText = year + month + date;
} else if (this.dateText.length != 8) {
alert("YYYYMMDD형식에 맞게 입력하십시오");
}
this.todoList.push({
done: false,
text: this.todo,
DueDate: this.dateText,
past: false,
});
this.todo = "";
this.dateText = "";
} else {
alert("할일을 입력하십시오");
}
},
extendItem: function (index) {
var str_date = this.todoList[index].DueDate;
var y = str_date.substr(0, 4); //입력한 날짜의 YYYY
var m = str_date.substr(4, 2); //입력한 날짜의 DD (Date객체의 month는 계산시 -1필요함(배열로 계산))
var d = str_date.substr(6, 2); //입력한 날짜의 MM
var date = new Date(
Date.parse(new Date(y, m - 1, d)) + 1 * 1000 * 60 * 60 * 24 //완료일 +하루(밀리초로 계산)
);
//날짜 형식으로 변경
var year = date.getFullYear();
var month = new String(date.getMonth() + 1);
var day = new String(date.getDate());
if (month.length == 1) month = "0" + month;
if (day.length == 1) day = "0" + day;
var due_date = year + month + day;
this.todoList[index].DueDate = due_date;
},
allClear: function () {
this.todoList = this.todoList.filter(function (value) {
return value.done == false; //필터에 참 값만 리턴
});
},
sortData: function (s) {
if (s == "todo") {
// 할일로 정렬
this.todoList.sort(function (a, b) {
return a.text < b.text ? -1 : 1;
});
} else {
this.todoList.sort(function (a, b) {
return a.DueDate < b.DueDate ? -1 : 1;
});
}
},
},
computed: {
remaining: function () {
return this.todoList.filter(function (value) {
return value.done;
}).length;
},
overDate: function (index) {
return this.todoList.filter(function (val) {
var date = new Date();
var year = date.getFullYear();
var month = new String(date.getMonth() + 1);
var day = new String(date.getDate());
if (month.length == 1) month = "0" + month;
if (day.length == 1) day = "0" + day;
var due_date = year + month + day;
val.past = val.DueDate < due_date ? true : false; //기한 지난 것 표시
return val.DueDate < due_date;
}).length;
},
},
});
</script>
</body>
</html>
댓글