🗓️ TIL (Today I Learned) 날짜
읽은 날: 2024.02.10
기록한 날: 2024.02.12
🔎 읽은 범위
Chapter 07~ Chapter 08
📖 책에서 기억하고 싶은 내용
😊 오늘 읽은 소감 & 떠오르는 생각
- 드디어 마지막 6주차 미션제출도 끝이 났다!! 아쉬운 점도 많았고 또 좋았던 점도 많았지만 족장님이 말씀하신 것처럼 아쉬운 점은 털어버리고 좋았던 점, 앞으로의 계획에 대해 회고도 따로 적어보려고 한다. 남은 부분도 공부해서 차근히 업로드해야지!!
- 실습 다하고 서버 문제요? 해결 못해서 그냥 제출한게 마음이 아프다... 이것저것 찾아보면서 해결해보려고 했는데 당장은 못해서 일단 포기... 미뤄두고 다시 시도해봐야겠다...ㅠㅠ
✅ 미션
기본 미션
p.315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener('DOMContentRoad', () => {
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>결과
분명 실습할 때는 됐는데요...? 갑자기 서버가 실행이 안돼서 결과화면을 못찍었습니다...
해결하면 바로 첨부할게요...
선택 미션
p.352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기
코드
<body>
<h1>할 일 목록</h1>
<input id="todo">
<button id="add-button">추가</button>
<div id="todo-list"></div>
</body>
<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('Write your todo.');
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.setAttribute('data-key', key);
item.appendChild(checkbox);
item.appendChild(text);
item.appendChild(button);
todoList.appendChild(item);
// todo 한 일 표시
checkbox.type = 'checkbox';
checkbox.addEventListener('change', (e) => {
item.style.textDecoration = e.target.checked ? 'line-through' : '';
})
text.textContent = input.value;
// todo 제거 기능 구현
button.textContent = '제거';
button.addEventListener('click', () => {
// removeTodo 함수 호출
removeTodo(key);
})
// input의 값 제거
input.value = '';
}
const removeTodo = (key) => {
// 요소를 찾고 제거
const item = document.querySelector(`data-key="${key}"]`);
todoList.removeChild(item);
}
// 이벤트와 요소 연결
addButton.addEventListener('click', addTodo);
input.addEventListener('keyup', (e) => {
// 키보드 엔터키로 바로 함수 호출
const ENTER = 13;
if(e.keyCode === ENTER){
addTodo();
}
})
})
</script>결과
분명 실습할 때는 됐는데요...? 갑자기 서버가 실행이 안돼서 결과화면을 못찍었습니다...
해결하면 바로 첨부할게요...
공부하자