<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
width: 700px;
height: 700px;
border: 1px solid red;
}
.box {
/* display: grid; */
padding: 10px;
width: 600px;
}
.card {
border-bottom: 1px solid gray;
padding: 10px;
margin: 5px;
}
.btn {
display: flex;
width: 100px;
margin-bottom: 10px;
}
.through{
text-decoration-line: line-through;
}
</style>
</head>
<body>
<div class="content">
<h1>todo리스트 띄우기</h1>
<button onclick="render()" class="btn">가져오기</button>
<div class="box" id="outerBox"></div>
</div>
<script>
function render() {
$.ajax({
type: "get",
url: "https://jsonplaceholder.typicode.com/posts",
contentType: "application/json; charset=utf-8",
}).done((data, textStatus, xhr) => {
let todo = xhr.responseJSON;
for (let i = 0; i < 10; i++) {
$("#outerBox").append(`<div class="card"> <input type="checkbox"
onclick="lineToggle(${i})"> <span class="line" id="${i}">${todo[i].title}</span> </div>`);
}
}).fail((error) => {
console.log("error : " + error);
});
}
function lineToggle(i){
let line = document.getElementById(`${i}`);
line.classList.toggle('through')
}
</script>
</body>
</html>