Project(2)-3. 기능

  알람 페이지

<script>
    const selVal = document.getElementById("selVal");
    const inputs = document.querySelectorAll("input");
    const set_btn = document.getElementById("set_btn");
    const result = document.getElementById("result");

    set_btn.addEventListener("click", function () {
        let inp1 = inputs[0].value;
        let inp2 = inputs[1].value;

        if (inp1 == "" || inp2 == "") {
            alert("빈칸을 채워주세요.");
        } else if (inp1 > 12 || inp1 < 1) {
            alert("시간은 1~12 사이의 숫자만 입력해주세요.");
        } else if (inp2 > 59 || inp2 < 1) {
            alert("분은 1~59 사이의 숫자만 입력해주세요.")
        } else {
            result.innerHTML = selVal.options[selVal.selectedIndex].text + 
            					` ${inp1}시 ${inp2}분 알람 예약`;
        }
    });
</script>

html 요소를 가져와 시간을 입력하지 않으면 alert창이 뜨도록 했다. 반대로 잘 입력됐을 경우 result.innerHTML을 통해 시간이 나타나는 것을 볼 수 있다.

 

  스톱워치 페이지

<script>
    const btns = document.querySelectorAll("button");
    const times = document.querySelectorAll("span");
    const result = document.getElementById("result");

    let myTime;
    let t0_s = 0;
    let t1_s = 0;
    let t2_s = 0;

    btns[0].addEventListener("click", function () {
        clearInterval(myTime); // 시작버튼 중복 오류 방지

        myTime = setInterval(function () {
            t2_s++; // 초 단위 +1

            if (t2_s < 10) {
                times[2].innerHTML = "0" + t2_s; // 10초보다 낮을 경우 "0" + t2_s
            } else if (t2_s >= 10 && t2_s < 60) {
                times[2].innerHTML = t2_s; // 10초를 넘을 경우 t2_s
            } else { // 60초가 되면
                t2_s = 0; // 초 단위 0 대입
                t1_s++; // 분 단위 +1

                if (t1_s < 10) {
                    times[1].innerHTML = "0" + t1_s;
                } else if (t1_s >= 10 && t1_s < 60) {
                    times[1].innerHTML = t1_s;
                } else { // 60분이 되면
                    t1_s = 0; // 분 단위 0 대입
                    t0_s++; // 시 단위 +1

                    if (t0_s < 10) {
                        times[0].innerHTML = "0" + t0_s;
                    } else if (t0_s >= 10 && t0_s < 60) {
                        times[0].innerHTML = t0_s;
                    }
                }
            }
        }, 800);
    });

    btns[1].addEventListener("click", function() {
        clearInterval(myTime);
    });

    btns[2].addEventListener("click", function() {
        clearInterval(myTime);

        t0_s = 0;
        t1_s = 0;
        t2_s = 0;

        result.innerHTML = `<span>00</span>:<span>00</span>:<span>00</span>`;
    });
</script>

시작 버튼을 누르면 초 단위인 t2_s 변수를 시작으로 시간을 차례대로 증가시켰다. t2-s가 60이 되면 t2-s는 다시 0이 되고 분 단위인 t1_s가 증가한다. 시 단위도 마찬가지로 진행된다. 이렇게 if문을 3중으로 해 코드를 짜봤으나 상당히 지저분해 보인다. 더 간단하고 유용한 방법이 있을 것이라 생각한다. 그럼에도 스스로 짜봤다는 것에 만족하고 게시해본다.

다음으로 정지 버튼을 누르면 clearInterval을 통해 진행되던 시간이 정지되도록 하였다. 또한 초기화 버튼은 clearInterval과 함께 초, 분, 시 단위를 모두 0으로 초기화한 뒤 result.innerHTML을 이용해 다시 초반 상태로 돌아오도록 했다.

 

 

  타이머 페이지

const check_btn = document.getElementById("check_btn");
    const str_btn = document.getElementById("str_btn");
    const res_btn = document.getElementById("res_btn");

    const inputs = document.querySelectorAll("input");
    const time = document.getElementById("time");

    let myTime;

    check_btn.addEventListener("click", function () {
        let mit = inputs[0].value;
        let sec = inputs[1].value;

        if (mit > 59 || mit < 0 || sec > 59 || sec < 0) {
            alert("시간을 잘못 입력하셨습니다. 다시 입력해주세요.");
        } else if (mit == "" || sec == "") {
            alert("시간을 입력해주세요.");
        } else {
            time.innerHTML = mit + "분 " + sec + "초";
            str_btn.style.display = "inline";
            res_btn.style.display = "inline";
        }
    });

    str_btn.addEventListener("click", function () {
        let mit = inputs[0].value;
        let sec = inputs[1].value;

        myTime = setInterval(function () {
            sec --;

            time.innerHTML = mit + "분 " + sec + "초";

            if (sec == 0) {
                sec = 60
                mit--;

                if (mit == -1) {
                    time.innerHTML = "타이머 종료";
                    clearInterval(myTime);
                }
            }
        }, 800);
    });

    res_btn.addEventListener("click", function () {
        clearInterval(myTime);
        time.innerHTML = "0분 " + "0초";
    });

먼저 알람 페이지와 마찬가지로 입력이 잘 됐을 경우와 안 됐을 경우로 나누어 alert창이 뜨게 만들었다.

시간을 잘 넣었다면 2개의 버튼과 함께 해당 시간이 뜨도록 해주었다.

시작 버튼을 누르면 초 단위인 sec 변수부터 감소되도록 하였다. 그리고 sec가 0이 되면 60을 대입, 분 단위 변수인 mit이 감소되도록 했다. 또한 mit의 값이 -1이 되면 time.innerHTML을 통해 "타이머 종료"로 바뀌도록 해주었다.

반면 시간이 진행되는 도중 초기화 버튼을 누를 경우 time.innerHTML은 "0분 0초"가 된다.

 

 

  후기

아주 쪼그만 개인 프로젝트라 간단한 모양새와 간단한 기능으로 구성해보려고 주제를 시계로 한 건데 예상 외로 어려웠다. 다른 부분은 수업에서 간간이 예제로 나와 금방 할 수 있었는데 타이머가 복병이었다.

그럼에도 나아아름 완성도가 있는 것 같아 만족스럽다.

다음번에도 이런 개인 프로젝트를 할 기회가 온다면 더 좋은 주제를 생각해 만들어보려 한다.