- 6주차 미션
기본과제
<!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>
<script>
document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect')
rects.forEach((rect, index) => {
const width = (index + 1)*100 //index : 1 2 3 4 => 100,200,300,400
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 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>
<script>
document.addEventListener('DOMContentLoaded', () => {
const body = document.body
// body부분
const h1 = document.createElement('h1')
h1.textContent = '할 일 목록'
body.appendChild(h1)
const input = document.createElement('input')
body.appendChild(input)
const addBtn = document.createElement('button')
addBtn.textContent = '추가하기'
body.appendChild(addBtn)
// 핵심 함수
const fn_addTodo = () =>{
// input에 값이 있으면 실행
if(input.value !== ''){
// div 생성
const div = document.createElement('div')
body.appendChild(div)
// 체크박스 생성 & 클릭 시 함수
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.addEventListener('change', () => {
if(checkbox.checked){
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
div.appendChild(checkbox)
// span 생성 & input의 값을 span에 넣기
const span = document.createElement('span')
span.textContent = input.value
input.value = ''
div.appendChild(span)
// 제거버튼 생성 & 클릭 시 함수
const delBtn = document.createElement('button')
delBtn.textContent = '제거하기'
delBtn.addEventListener('click', () => {
div.parentNode.removeChild(div)
})
div.appendChild(delBtn)
}
}
// 추가하기 버튼 클릭했을 때 fn_addTodo() 함수 호출
addBtn.addEventListener('click', () => {
fn_addTodo()
})
// input에서 엔터키 눌렀을 때 fn_addTodo() 함수 호출
input.addEventListener('keyup', (event) => {
if (event.keyCode == 13){
fn_addTodo()
}
})
})
</script>
</head>
<body>
</body>
</html>
혼공단 마지막 날이네요...
그동안 미션을 깨면서 자바스크립트에 대해 알게 된 것 같아 뜻깊었던 경험이 되었습니다!!
감사했습니다 :)🥰
'혼공학습단 > 자바스크립트' 카테고리의 다른 글
| Chapter 06 (0) | 2023.02.12 |
|---|---|
| 혼공학습단 9기_5주차 미션 (0) | 2023.02.12 |
| 혼공학습단 9기_4주차 미션 (0) | 2023.02.03 |
| Chapter 05 (0) | 2023.02.03 |
| 혼공학습단 9기_3주차 미션 (0) | 2023.01.20 |
