[momentum app] stopwatch 만들기

https://ge5rg2.github.io/momentum-2021/ 

Momentum App

개인적으로 사용 빈도가 가장 높을 것 같은 stopwatch를 만들고 momentum app 기능에 추가했다.

      <!-- Timer-->
      <div>
        <div class="main-timer hidden" id="mainTimer">
          <span class="pageDown">✖</span>
          <div class="timer-clock" id="timerClock">00:00:00</div>
          <div class="timerBtnControl">
            <button id="jsTimerStartBtn">start</button>
            <button id="jsTimerStopBtn">stop</button>
          </div>
        </div>
      </div>

HTML (화면 내리는 버튼은 기존에 사용하던 pageDown Class를 활용하였다.)

.main-timer {
  z-index: 4;
  position: absolute;
  top: 50px;
  left: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 130px;
  width: 200px;
  border-radius: 10px;
  background-color: #2c2c2c;
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.26), 0 1px 3px rgba(0, 0, 0, 0.329);
}

.timer-clock {
  margin-bottom: 5px;
  font-size: 40px;
  font-weight: 800;
}

.timerBtnControl button {
  all: unset;
  cursor: pointer;
  background-color: white;
  border-radius: 10px;
  opacity: 0.7;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.438), 0 1px 3px rgba(0, 0, 0, 0.329);
  padding: 5px 0px;
  width: 60px;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
}

.timerBtnControl button:hover {
  opacity: 1;
  color: black;
}

.timerBtnControl button:active {
  transform: scale(0.9);
}

.main-timer span {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
}

CSS (다른 기능을 가리지 않도록 z-index는 4로 지정하였다.)

const timerPageDown = document.querySelector("#mainTimer .pageDown");
const timerPage = document.querySelector("#mainTimer");
const clickTimer = document.querySelector(".fa-stopwatch");
const timerClock = document.getElementById("timerClock");
const timerStop = document.getElementById("jsTimerStopBtn");
const timerStart = document.getElementById("jsTimerStartBtn");

let time = 0;
let secs = 0;
let mins = 0;
let hours = 0;
let timer;
let pauseFlag = false;

function timerRun() {
    time++;
    mins = Math.floor(time/60);
    hours = Math.floor(mins/60);
    secs = time%60;
    mins = mins%60;
    if(hours<10){
        hours = "0" + hours;
    }
    if(mins<10){
        mins = "0" + mins;
    }
    if(secs<10){
        secs = "0" + secs;
    }
    timerClock.innerText = hours+":"+mins+":"+secs;
}

function handleStartTimer() {
    if(pauseFlag === false) {
        timer = setInterval(timerRun, 1000);
        pauseFlag = true;
        timerStart.innerText = "pause";
    } else if(pauseFlag === true) {
        clearInterval(timer);
        pauseFlag = false;
        timerStart.innerText = "start";
    }
}

function handleStopTimer() {
    if(pauseFlag === true) {
        clearInterval(timer);
        time = 0;
        timerClock.innerText = "00:00:00";
        pauseFlag = false;
        timerStart.innerText = "start";
    } else if(pauseFlag === false) {
        clearInterval(timer);
        time = 0;
        timerClock.innerText = "00:00:00";
    }
}

timerStop.addEventListener("click", handleStopTimer);
timerStart.addEventListener("click", handleStartTimer);

function hiddenPage(event) {
    event.preventDefault();
    timerPage.classList.remove("page-up");
    timerPage.classList.add("page-down");
    setTimeout(function(event) {timerPage.classList.remove("flex"); timerPage.classList.add("hidden");}, 501);
}

timerPageDown.addEventListener("click", hiddenPage);

function clickedBtn(event) {
    timerPage.classList.remove("page-down");
    timerPage.classList.add("page-up");
    timerPage.classList.remove("hidden");
    timerPage.classList.add("flex");
}

clickTimer.addEventListener("click", clickedBtn);

JS

start button을 누르면 stopwatch가 자동 실행되게 하였으며, start 버튼은 pause로 변경된다.

pause button을 누르면 clearinterval 상태가 되며, pause button은 자동으로 start button으로 변경된다.

어떤 상황에서도 stop button을 누르면 초기화 상태가 되도록 만들었다.

start

pause

stop

stopwatch icon 클릭 시 좌측 상단에 뜬다