만드는 이유
1. 심심한 주말, 공부하기 위해
2. 기능을 프로그래밍할 때 거쳐야하는 사고방식에 대해 익숙해지기 위해
단순하다. 숫자를 입력하면 n x n의 형식으로 네모 격자가 출력된다.
19를 입력하면 19x19가 되어 바둑판이 될 것이다.
코드
<!DOCTYPE html>
<html lang="ko">
<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>n x n coodinate</title>
<style>
.box {
width: 50px;
height: 50px;
border: 1px black solid;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<input class="colInput" type="number" />
<div class="container"></div>
<script>
const colInput = document.querySelector('.colInput')
const container = document.querySelector('.container')
colInput.focus()
function Box () {
const element = document.createElement('div')
element.classList.add('box')
container.append(element)
}
const makeBoxes = (value) => {
for (let i = 0; i < value; i++) {
new Box()
}
}
colInput.addEventListener('keyup', () => {
const value = +colInput.value
if(value <= 0) {
container.innerHTML = '<p>유효한 값을 넣어주세요.</p>'
return
}
container.innerHTML = ''
container.style.width = `${value * 50}px`
makeBoxes(value * value)
})
</script>
</body>
</html>
코드설명
html에서는 container로 사용할 div와 input 태그를 만들어준다.
css에서는 격자가 들어갈 div의 스타일을 미리 설정해준다. 격자의 역할을 하기 위해 inline-block으로 설정되었으며, 사이즈는 정사각형(50px)으로 맞춰준다.
JavaScript에서는...
- container div와 input의 dom을 취득한다.
- 최초 앱 실행시 input에 포커스가 이동하도록 .focus() 메서드를 실행해준다.
- Box라는 생성자함수를 만들어준다. 이 생성자 함수가 실행이 되면 div 하나가 생성이 되고,
생성된 div를 container의 자식 요소로 붙여줄 것이다. - makeBoxes라는 헬퍼 함수를 만들어준다. 주어진 value만큼 Box의 인스턴스를 만드는 함수다.
- 만약 입력한 키가 떼진다면? value만큼 makeBoxes가 반복할 것이고 반복한 만큼 new Box()가 실행될 것이다.
- 이 때 n x n의 좌표를 생성해야 하므로 container의 width는 value에 비례하게 증감하도록 설계한다.
'Javascript' 카테고리의 다른 글
| 객체 장난 (0) | 2023.02.01 |
|---|---|
| n x n 좌표 생성기 (2) / (클로저) (0) | 2023.01.29 |
| 함수 장난 (1) (0) | 2023.01.27 |
| circle live 10 ( 이벤트버블링, stopPropagation() ) (0) | 2023.01.10 |
| [생성자 함수] 클릭하면 움직이는 원(circle) 만들기 (0) | 2022.12.05 |
