알람 설정 두가지 방법

김서현·2025년 2월 4일

frontend

목록 보기
26/34
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으로 받아버리는 방법
하루종일 스크롤할일 없겠죠?

profile
한양대 학생입니다. 서울캠입니다.

0개의 댓글