부트스트랩
https://getbootstrap.kr/
<!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>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="./js/jquery-3.6.4.min.js"></script>
<style>
hr {
width: 500px;
}
.todo {
font-size: 20px;
width: 200px;
}
.form-control {
width: 400px !important;
}
body {
margin: 20px;
}
.task {
margin-top: 15px;
margin-bottom: 5px;
}
.task-done {
background-color: gray !important;
}
</style>
</head>
<body>
<div class="main">
<h1>투두리스트</h1><br>
<div class="input-area">
<div class="row g-2">
<div class="col-auto">
<input type="text" class="form-control" id="task-input">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3" id="add-button">추가</button>
</div>
</div>
</div>
<hr><br>
</div>
<div id="task-main">
</div>
<script>
/*
1. 유저가 할 일 입력
2. 버튼을 클릭하면 할 일이 추가됨
3. 추가된 목록을 웹페이지에 출력하기
4. 완료버튼을 누르면 할일에 완료표시가 보여진다
체크 했는지 안했는지 확인하는 방법
-> 할 일을 저장할 때 상태값도 같이 저장 (객체 형태로)
4-1. 상태값 객체에 true/false 넣어서
4-2. true면 완료 / false면 미완료
5. 삭제버튼 누르면 삭제되게
*/
let taskInput = document.getElementById("task-input"); // 내가 적은 할일
let addBtn = document.getElementById("add-button"); // 추가 버튼
let taskList = []; // 유저가 입력한 할일을 저장하는 배열
let taskMain = document.getElementById('task-main');
// 할 일을 배열에 추가하는 함수
let addTask = function(){
// console.log("입력완료");
let task = {
taskContent : taskInput.value,
isComplete : false
}
taskList.push(task);
console.log(taskList);
render(); // 웹페이지에 taskList를 출력하는 함수
taskInput.value = '';
}
// 할 일 목록을 다시 출력해주는 함수
let render = function(){
let resultHTML = "";
for(let i = 0; i < taskList.length; i++){
// 체크상태에 따른 task를 출력
// isComplete : false --> class가 task인 태그
// isComplete : true --> class가 task task-done인 태그
if(taskList[i].isComplete){
// isComplete = true일때
resultHTML += `
<div class="task-board">
<div class="row g-3 task task-done">
<div class="col-auto todo">
<span class="todo">${taskList[i].taskContent}</span>
</div>
<div class="col-auto">
<button class="btn btn-success" onclick="toggleCheck('${i}')">완료</button>
<button class="btn btn-danger" onclick="deleteTask('${i}')">삭제</button>
</div>
</div>
</div>
`;
}else{
// isComplete = false일때
resultHTML += `
<div class="task-board">
<div class="row g-3 task">
<div class="col-auto todo">
<span class="todo">${taskList[i].taskContent}</span>
</div>
<div class="col-auto">
<button class="btn btn-success" onclick="toggleCheck('${i}')">완료</button>
<button class="btn btn-danger" onclick="deleteTask('${i}')">삭제</button>
</div>
</div>
</div>
`;
}
}
taskMain.innerHTML = resultHTML;
}
addBtn.addEventListener("click", addTask);
// 완료 여부에 따라서 다시 출력해주는 함수
let toggleCheck = function(idx){
// 내가 누른 버튼이 몇번째 인덱스인지
console.log("선택한 버튼 위치", idx);
// 인덱스를 활용해서 특정한 할일에 대한 완료/미완료상태를 변경
if(taskList[idx].isComplete){
taskList[idx].isComplete = false; // true완료, false미완료
}else{
taskList[idx].isComplete = true; // true완료, false미완료
}
console.log(taskList);
// 체크상태가 바뀐 정보를 웹페이지에 출력(갱신/업데이트)
render();
}
// 삭제 버튼을 누르면 해당 할일이 삭제되는 함수
// 갱신된 값도 다시 출력을 해줘야 함
let deleteTask = function(idx){
// 배열 데이터 삭제: splice()
// splice(시작 인덱스, 삭제할 갯수)
taskList.splice(idx, 1);
render();
}
</script>
</body>
</html>
댓글