카운트다운 제작.

카운트다운 데모.

제목과 날짜를 입력하면 그 날짜부터 지금까지의 시간차를 보여준다.

Html 분석.

비디오

    <video class="video-background" id="video-background" loop muted autoplay>
        <source src="time.mp4"></source>
    </video>
        <div class="video-overlay"></div>

비디오 반복재생, 음소거 결정,로드시 자동실행.

비디오태그

날짜 선택.

 <label for="date-picker">날짜를 선택하세요.</label>
                <input type="date" id="date-picker">
                <button type="submit">제출.</button>

input-date

자바스크립트 분석.

날짜 최솟값으로 현재 날짜.

Date.prototype.toISOString()

날짜를 yyyy-mm-dd 형식으로 표현,isostring의 차이점은 그냥 표현 형식의 차이

const today = new Date().toISOString();으로 하면.
2022-05-01T03:44:26.830Z으로 현재 시간이 나온다.
우리가 필요한건 T 앞의 부분뿐이므로.
split('T')를 써서 두개로 분리.
첫번째 항목만 선택 [0]
따라서 다음과 같은 코드 완성.

//오늘의 날짜를 date의 최솟값으로 설정해 카운트다운의 기준점을 만든다
const today = new Date().toISOString().split('T')[0];

그리고 이 값을 날짜의 최솟값으로 전달.
dateEl.setAttribute('min', today);

날짜를 입력받으면 일어나는 작용에 대해 알아보자.

//카운트다운에서 입력받으면 다음 창으로 넘어감.
countdownForm.addEventListener('submit', updateCountdown);

업데이트로 변경할 카운트다운 제목과 날짜를 만들고.
let countdownTitle = '';
let countdownDate = '';

function updateCountdown(e) {
  e.preventDefault();
  //제목,날짜를 변경, 값을 로컬 저장소에 저장.
  countdownTitle = e.srcElement[0].value;
  countdownDate = e.srcElement[1].value;
  savedCountdown = {
    title: countdownTitle,
    date: countdownDate,
  };
  localStorage.setItem('countdown', JSON.stringify(savedCountdown));
  // Check if no date entered
  if (countdownDate === '') {
    alert('날짜를 선택해주세요');
  } else {
    //선택한 날짜가 가지는 전체 시간.
    countdownValue = new Date(countdownDate).getTime();
    updateDOM();
  }
}

이제 문서를 업데이트하자.

// 문서에 카운트다운 값 채우기. / UI 완성.
function updateDOM() {
  countdownActive = setInterval(() => {
    //현재시간의 총량을 가져옴.
    const now = new Date().getTime();
    //선택시간- 현재시간량은 걸리는 기간.
    const distance = countdownValue - now;
    //시간 계산.
    const days = Math.floor(distance / day);
    const hours = Math.floor((distance % day) / hour);
    const minutes = Math.floor((distance % hour) / minute);
    const seconds = Math.floor((distance % minute) / second);
    // 입력 숨기기.
    inputContainer.hidden = true;
    // 카운트다운이 끝나면 최종 실행.
    if (distance < 0) {
      countdownEl.hidden = true;
      clearInterval(countdownActive);
      completeElInfo.textContent = `${countdownTitle} finished on ${countdownDate}`;
      completeEl.hidden = false;
    } else {
      // 카운트다운이 진행되는 동안에는 시간이 줄어드는 게 보여야 한다.
      countdownElTitle.textContent = `${countdownTitle}`;
      timeElements[0].textContent = `${days}`;
      timeElements[1].textContent = `${hours}`;
      timeElements[2].textContent = `${minutes}`;
      timeElements[3].textContent = `${seconds}`;
      completeEl.hidden = true;
      countdownEl.hidden = false;
    }
  }, second);
  //setinterval의 간격이 초단위로 가면서 초시계 완성!
}

const timer = setInterval(function(){ 특정함수(); }, 1000);
을 활용해 초시계를 만들수 있다.

리셋.

clearInterval(timer);을 써서 카운트다운 종료.

function reset() {
  // 카운트다운은 숨기고 입력창은 보이게.
  countdownEl.hidden = true;
  completeEl.hidden = true;
  inputContainer.hidden = false;
  // 카운트다운 멈춰!
  clearInterval(countdownActive);
  //값을 리셋, 로컬 저장소값도 삭제.
  countdownTitle = '';
  countdownDate = '';
  localStorage.removeItem('countdown');
}

완료창.

 if (distance < 0) {
      countdownEl.hidden = true;
      clearInterval(countdownActive);
      completeElInfo.textContent = `${countdownTitle} finished on ${countdownDate}`;
      completeEl.hidden = false;

로컬 저장소에 저장.

재기동해도 이전에 선택한 기간을 기억하도록. 로커저장소에 저장.

savedCountdown = {
    title: countdownTitle,
    date: countdownDate,
  };
  localStorage.setItem('countdown', JSON.stringify(savedCountdown));

카운트다운에서 다음과 같이 저장.

// On Load, check localStorage
restorePreviousCountdown();
매번 코드 실행시 저장소를 체크한다.

function restorePreviousCountdown() {
  // 유효값이 있을 경우 저장소에서 날짜를 가져온다.
  if (localStorage.getItem('countdown')) {
    //값이 있으면 카운트다운 실행.
    inputContainer.hidden = true; 
    savedCountdown = JSON.parse(localStorage.getItem('countdown'));
    //parse를 통해 문자값을 변환.
    countdownTitle = savedCountdown.title;
    countdownDate = savedCountdown.date;
    countdownValue = new Date(countdownDate).getTime();
    updateDOM();
    //저장값으로 카운트다운 실행.
  }
}

완성