for (let i = 0; i < 24; i++) {
const option = document.createElement("option");
option.value = i;
option.textContent = i.toString().padStart(2, "0");
hourSelect.appendChild(option);
}
위 코드는 알람 예약 선택지를 만드는 방법 중 하나이다.
for문을 쓰기에 -> 내가 하나하나 모든 숫자를 입력할 필요가 없는 방법
option.textContent = i.toString().padStart(2, "0");
이 부분은 i를 문자열로 바꾸고, padStart는 말 그대로 패드가 2개라는 것이다. 앞이 비면 0으로 채우겠다. 이런 뜻!
i가 3이면 03이겠지요?
그치만 이것보다 더 UI/UX 쪽으로 좋은 방법이 있습니다.
<div>
<input id="hour" type="number" class="time-input" placeholder="시" min="0" max="23" />
:
<input id="minute" type="number" class="time-input" placeholder="분" min="0" max="59" />
:
<input id="second" type="number" class="time-input" placeholder="초" min="0" max="59" />
<button id="add-alarm-button" class="control-button">추가</button>
</div>
이런 식으로 아예 input으로 받아버리는 방법
하루종일 스크롤할일 없겠죠?