반복문 활용해서 카드 리스트 만들어보기
<!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>카드리스트만들어보기</title>
<style>
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
border: 1px solid black;
padding: 10px;
}
.card {
border: 1px solid lightcyan;
box-shadow: 0 4px 4px 0 gray;
padding: 10px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>반복문으로 리스트 만들어보기</h1>
<button onclick="render()"> render</button>
<div class="box" id="outerBox"></div>
<script>
function render() {
let el = document.querySelector("#outerBox");
// 반복문 통해서 E 요소 생성
for(let i = 0; i < 10; i++) {
el.append(makeCard(i));
}
}
function makeCard(id) {
let card = document.createElement("div");
card.setAttribute("class", "card");
card.setAttribute("id", "card--"+id);
card.innerHTML = `
<h3>제목 ${id} 입니다</h3>
<p>내용 ${id} 입니다</p>
<button onclick="del(${id})">삭제</button>
`;
return card;
}
function del(id) {
let el = document.querySelector("#card--" + id);
el.remove();
}
</script>
</body>
</html>
토글 기능 만들어 보기
<!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>
<style>
.like--heart {
font-size: 150px;
color: gray;
cursor: pointer;
}
.like--heart.liked {
color: red;
}
</style>
</head>
<body>
<span class="like--heart" onclick="likeToggle()">❣</span>
<script>
function likeToggle() {
let likeHeart = document.querySelector(".like--heart");
console.log(likeHeart);
console.log(likeHeart.classList);
likeHeart.classList.toggle('liked');
}
</script>
</body>
</html>
'JS' 카테고리의 다른 글
| 제이쿼리 기본 문법 사용해보기 (0) | 2023.05.08 |
|---|---|
| 제이쿼리란 (0) | 2023.05.08 |
| 예제 (값 받아오기) (0) | 2023.05.08 |
| BOM (0) | 2023.05.08 |
| 이벤트 등록 처리 (0) | 2023.05.04 |