🩷 기본미션
🩵 기본미션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>속성 조작하기</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
const rects = document.querySelectorAll(".rect");
rects.forEach((rect, index) => {
const width = (index + 1) * 100;
const src = `http://placekitten.com/${width}/250`;
rect.setAttribute("src", src);
});
});
</script>
</head>
<body>
<img class="rect" />
<img class="rect" />
<img class="rect" />
<img class="rect" />
</body>
</html>
🩵 선택미션
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>할 일 목록 만들기</title>
</head>
<body>
<h1>할 일 목록</h1>
<input id="todo" />
<button id="add-button">추가하기</button>
<div id="todo-list"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
// 문서 객체를 가져옵니다.
const input = document.querySelector("#todo");
const todoList = document.querySelector("#todo-list");
const addButton = document.querySelector("#add-button");
// 변수를 선언합니다.
let keyCount = 0;
// 함수를 선언합니다.
const addTodo = () => {
// 입력 양식에 내용이 없으면 추가하지 않습니다.
if (input.value.trim() === "") {
alert("할 일을 입력해주세요.");
return;
}
// 문서 객체를 설정합니다.
const item = document.createElement("div");
const checkbox = document.createElement("input");
const text = document.createElement("span");
const button = document.createElement("button");
// 문서 객체를 식별할 키를 생성합니다.
const key = keyCount;
keyCount += 1;
// item 객체를 조작하고 추가합니다.
item.setAttribute("data-key", key);
item.appendChild(checkbox);
item.appendChild(text);
item.appendChild(button);
todoList.appendChild(item);
// checkbox 객체를 조작합니다.
checkbox.type = "checkbox";
checkbox.addEventListener("change", (event) => {
item.style.textDecoration = event.target.checked
? "line-through"
: "";
});
// text 객체를 조작합니다.
text.textContent = input.value;
// button 객체를 조작합니다.
button.textContent = "제거하기";
button.addEventListener("click", () => {
removeTodo(key);
});
// 입력 양식의 내용을 비웁니다.
input.value = "";
};
const removeTodo = (key) => {
// 식별 키로 문서 객체를 제거합니다.
const item = document.querySelector(`[data-key="${key}"]`);
todoList.removeChild(item);
};
// 이벤트 연결
addButton.addEventListener("click", addTodo);
input.addEventListener("keyup", (event) => {
// 입력 양식에서 Enter 키를 누르면 바로 addTodo() 함수를 호출합니다.
const ENTER = 13;
if (event.keyCode === ENTER) {
addTodo();
}
});
});
</script>
</body>
</html>
할 일 목록 만들기
할 일 목록
